修改样式

package-lock.json

@@ -2305,6 +2305,7 @@
       "resolved": "http://registry.npm.taobao.org/boom/download/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
       "dev": true,
+      "optional": true,
       "requires": {
         "hoek": "2.x.x"
       }
@@ -5734,7 +5735,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5755,12 +5757,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5775,17 +5779,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5902,7 +5909,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5914,6 +5922,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5928,6 +5937,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5935,12 +5945,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5959,6 +5971,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6039,7 +6052,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6051,6 +6065,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6136,7 +6151,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6172,6 +6188,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6191,6 +6208,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6234,12 +6252,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6697,7 +6717,8 @@
       "version": "2.16.3",
       "resolved": "http://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "home-or-tmp": {
       "version": "2.0.0",

src/main.js

@@ -1,25 +1,27 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
-import MintUI from 'mint-ui'
-import store from './store'
-import 'mint-ui/lib/style.css'
-import './assets/styles/iconfont.css'
-import './permission'
-
-import '@/styles/reset.scss'
-import '@/styles/variables.scss'
-import '@/styles/style.scss'
-
-import Vant from 'vant'
-import 'vant/lib/index.css'
-import 'vant/lib/icon/local.css'
+import Vue from "vue";
+import App from "./App";
+import router from "./router";
+import MintUI from "mint-ui";
+import store from "./store";
+import "mint-ui/lib/style.css";
+import "./assets/styles/iconfont.css";
+import "./permission";
+
+import "@/styles/reset.scss";
+import "@/styles/variables.scss";
+import "@/styles/style.scss";
+
+import Vant from "vant";
+import "vant/lib/index.css";
+import "vant/lib/icon/local.css";
 // import '@/styles/vant-css/index.css'
 
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+import "@/styles/media.scss";
 
 // main.js
 // import 'lib-flexible'
@@ -29,16 +31,16 @@ import 'element-ui/lib/theme-chalk/index.css'
 // Vue.use(AlertPlugin)
 // Vue.use(ToastPlugin)
 
-Vue.use(MintUI)
-Vue.use(Vant)
-Vue.use(ElementUI)
-Vue.config.productionTip = false
+Vue.use(MintUI);
+Vue.use(Vant);
+Vue.use(ElementUI);
+Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   components: { App },
-  template: '<App/>'
-})
+  template: "<App/>"
+});

src/pages/advice/DialysisAdviceTable.vue

@@ -2,37 +2,71 @@
   <div class="mainBox">
     <div class="choice">
       <ul>
-
-        <el-popover placement="bottom" trigger="click" v-model="show_patient_type_selector">
-          <li slot="reference">{{patient_types[patient_selected].text}}<span class="iconfont">&#xe74a;</span></li>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_patient_type_selector"
+        >
+          <li slot="reference">
+            {{ patient_types[patient_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="type in patient_types" :key="type.value" @click="handlePaitentType(type.value)"
-                  :class="advice_type_selected == type.value ? 'tick' : ''">{{type.text}}
+              <li
+                v-for="type in patient_types"
+                :key="type.value"
+                @click="handlePaitentType(type.value)"
+                :class="advice_type_selected == type.value ? 'tick' : ''"
+              >
+                {{ type.text }}
               </li>
             </ul>
           </div>
         </el-popover>
 
-
-        <el-popover placement="bottom" trigger="click" v-model="show_zone_selector">
-          <li slot="reference">{{zones[zone_selected].text}}<span class="iconfont">&#xe74a;</span></li>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_zone_selector"
+        >
+          <li slot="reference">
+            {{ zones[zone_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="(zone, index) in zones" :key="zone.value" @click="handleZoneChange(index)"
-                  :class="zone_selected == index ? 'tick' : ''">{{zone.text}}
+              <li
+                v-for="(zone, index) in zones"
+                :key="zone.value"
+                @click="handleZoneChange(index)"
+                :class="zone_selected == index ? 'tick' : ''"
+              >
+                {{ zone.text }}
               </li>
             </ul>
           </div>
         </el-popover>
-        <el-popover placement="bottom" trigger="click" v-model="show_sch_type_selector">
-          <li slot="reference">{{schedule_types[schedule_type_selected].text}}<span class="iconfont">&#xe74a;</span>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_sch_type_selector"
+        >
+          <li slot="reference">
+            {{ schedule_types[schedule_type_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="scheduleType in schedule_types" :key="scheduleType.value"
-                  @click="handletimeType(scheduleType.value)"
-                  :class="schedule_type_selected == scheduleType.value ? 'tick' : ''">{{scheduleType.text}}
+              <li
+                v-for="scheduleType in schedule_types"
+                :key="scheduleType.value"
+                @click="handletimeType(scheduleType.value)"
+                :class="
+                  schedule_type_selected == scheduleType.value ? 'tick' : ''
+                "
+              >
+                {{ scheduleType.text }}
               </li>
             </ul>
           </div>
@@ -53,7 +87,10 @@
       </ul>
     </div>
 
-    <div style="width:100%;overflow:hildden;overflow-x:auto;" class="DialysisAdvice">
+    <div
+      style="width:100%;overflow:hildden;overflow-x:auto;"
+      class="DialysisAdvice"
+    >
       <div class="blueBorder"></div>
       <table class="table">
         <tr>
@@ -69,8 +106,6 @@
           <th width="100px">校对时间</th>
           <th width="50px">开嘱医生</th>
           <th width="100px">开嘱时间</th>
-
-
         </tr>
         <template v-for="(schedules, zone_name, index) in filtedScheduals">
           <tr :key="index">
@@ -87,57 +122,88 @@
             <td></td>
             <td></td>
           </tr>
-          <template v-for="(schedule) in schedules">
+          <template v-for="schedule in schedules">
             <template v-for="(group, group_index) in schedule.new_advice">
-              <tr v-for="(advice, advice_index) in group.advices" @click="clickfunction(schedule)">
+              <tr
+                v-for="(advice, advice_index) in group.advices"
+                @click="clickfunction(schedule)"
+              >
                 <!--<td  v-if="advice_index == 0"-->
                 <!--:rowspan="group.advices.length">{{ advice.parent_id == 0 ? schedule.device_number.number : "" }}</td>-->
 
                 <!--<td  v-if="advice_index == 0" :rowspan="group.advices.length">{{ advice.parent_id == 0 && advice.dialysis_order&&advice.dialysis_order.device_number&& advice.dialysis_order.device_number.number.length > 0 ? advice.dialysis_order.device_number.number : schedule.device_number.number }}</td>-->
                 <!--<td v-if="advice_index == 0" :rowspan="group.advices.length">-->
-                  <!--{{getNumber(advice,schedule)}}-->
+                <!--{{getNumber(advice,schedule)}}-->
                 <!--</td>-->
 
-                <td v-if="advice_index == 0"
-                    :rowspan="group.advices.length" style="color:#409eff;">{{ advice.parent_id == 0 ?
-                  schedule.patient.name : '' }}
+                <td
+                  v-if="advice_index == 0"
+                  :rowspan="group.advices.length"
+                  style="color:#409eff;"
+                >
+                  {{ advice.parent_id == 0 ? schedule.patient.name : "" }}
                 </td>
-                <td v-if="advice_index == 0"
-                    :rowspan="group.advices.length">{{ advice.parent_id == 0 ? schedule.patient.dialysis_no : '' }}
+                <td v-if="advice_index == 0" :rowspan="group.advices.length">
+                  {{
+                    advice.parent_id == 0 ? schedule.patient.dialysis_no : ""
+                  }}
                 </td>
-                <td v-if="advice_index == 0"
-                    :rowspan="group.advices.length">{{ getAdaviceType(advice.advice_type,advice.parent_id)}}
+                <td v-if="advice_index == 0" :rowspan="group.advices.length">
+                  {{ getAdaviceType(advice.advice_type, advice.parent_id) }}
                 </td>
-                <td v-if="advice_index == 0" :rowspan="group.advices.length">{{ advice.parent_id == 0 ? parseTime(advice.start_time, "{m}-{d} {h}:{i}"):''}}
+                <td v-if="advice_index == 0" :rowspan="group.advices.length">
+                  {{
+                    advice.parent_id == 0
+                      ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
+                      : ""
+                  }}
                 </td>
-                <td :class="advice.parent_id == 0 ? 'advice_content' : 'subadvice_content'">
-                  <span>{{advice.advice_name }}</span>
-                  <span>{{advice.advice_desc}}{{advice.drug_spec_unit}}</span>
+                <td
+                  :class="
+                    advice.parent_id == 0
+                      ? 'advice_content'
+                      : 'subadvice_content'
+                  "
+                >
+                  <span>{{ advice.advice_name }}</span>
                   <span
-                    v-if="advice.prescribing_number">{{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span>
-                  <span v-if="advice.single_dose"> 单次用量 {{advice.single_dose}}{{advice.single_dose_unit}}</span>
-                  <span>{{advice.delivery_way}}</span>
-                  <span>{{advice.execution_frequency}}</span>
-                  <span v-if="advice.parent_id == 0 && advice.remark.length > 0">({{advice.remark}})</span>
-
+                    >{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span
+                  >
+                  <span v-if="advice.prescribing_number"
+                    >{{ advice.prescribing_number
+                    }}{{ advice.prescribing_number_unit }}</span
+                  >
+                  <span v-if="advice.single_dose">
+                    单次用量 {{ advice.single_dose
+                    }}{{ advice.single_dose_unit }}</span
+                  >
+                  <span>{{ advice.delivery_way }}</span>
+                  <span>{{ advice.execution_frequency }}</span>
+                  <span v-if="advice.parent_id == 0 && advice.remark.length > 0"
+                    >({{ advice.remark }})</span
+                  >
+                </td>
+                <td>
+                  {{ parseTime(advice.execution_time, "{m}-{d} {h}:{i}") }}
                 </td>
-                <td>{{ parseTime(advice.execution_time, '{m}-{d} {h}:{i}') }}</td>
                 <td>{{ getName(advice.execution_staff) }}</td>
                 <td>{{ getName(advice.checker) }}</td>
-                <td>{{ parseTime(advice.check_time, '{m}-{d} {h}:{i}') }}</td>
+                <td>{{ parseTime(advice.check_time, "{m}-{d} {h}:{i}") }}</td>
                 <td>{{ getName(advice.advice_doctor) }}</td>
-                <td>{{ parseTime(advice.created_time, '{m}-{d} {h}:{i}')}}</td>
-
-
+                <td>{{ parseTime(advice.created_time, "{m}-{d} {h}:{i}") }}</td>
               </tr>
             </template>
-
           </template>
         </template>
       </table>
-      <div class="NoData" v-show="zones.length  <= 1"><img style="margin-top: 50px; margin-bottom: 50px"
-                                                           src="@/assets/login/data.jpg" alt=""></div>
 
+      <div class="NoData" v-show="zones.length <= 1">
+        <img
+          style="margin-top: 50px; margin-bottom: 50px"
+          src="@/assets/login/data.jpg"
+          alt=""
+        />
+      </div>
     </div>
 
     <mt-datetime-picker
@@ -147,306 +213,310 @@
       year-format="{value} "
       month-format="{value} "
       date-format="{value} "
-      @confirm="requestSchedualDoctors">
+      @confirm="requestSchedualDoctors"
+    >
     </mt-datetime-picker>
   </div>
 </template>
 
 <script>
-  import SideBar from '@/pages/layout/SideBar'
-  import {parseTime} from '@/utils'
-  import {getSchedualDoctors} from '@/api/advice'
-
-  export default {
-    name: 'DialysisAdviceTable',
-    components: {
-      SideBar
+import SideBar from "@/pages/layout/SideBar";
+import { parseTime } from "@/utils";
+import { getSchedualDoctors } from "@/api/advice";
+
+export default {
+  name: "DialysisAdviceTable",
+  components: {
+    SideBar
+  },
+  data() {
+    return {
+      selected_date: new Date(),
+      admin_user: [],
+
+      show_sch_type_selector: false,
+      schedule_type_selected: 0,
+      schedule_types: [
+        { value: 0, text: "全部班次" },
+        { value: 1, text: "上午" },
+        { value: 2, text: "下午" },
+        { value: 3, text: "晚上" }
+      ],
+
+      show_zone_selector: false,
+      zone_selected: 0,
+      show_patient_type_selector: false,
+      zones: [{ value: 0, text: "全部分区", select: true }],
+
+      show_advice_type_selector: false,
+      advice_type_selected: 0,
+      advice_types: [
+        { value: 0, text: "全部医嘱" },
+        { value: 1, text: "长期医嘱" },
+        { value: 3, text: "临时医嘱" }
+      ],
+
+      patient_types: [
+        { value: 0, text: "全部病人" },
+        { value: 1, text: "我的病人" },
+        { value: 2, text: "未执行病人" }
+      ],
+      patient_selected: 0,
+
+      scheduleMap: {}
+    };
+  },
+  computed: {
+    selected_date_str: function() {
+      return parseTime(this.selected_date, "{y}-{m}-{d}");
     },
-    data () {
-      return {
-        selected_date: new Date(),
-        admin_user: [],
-
-        show_sch_type_selector: false,
-        schedule_type_selected: 0,
-        schedule_types: [
-          {value: 0, text: '全部班次'},
-          {value: 1, text: '上午'},
-          {value: 2, text: '下午'},
-          {value: 3, text: '晚上'}
-        ],
-
-        show_zone_selector: false,
-        zone_selected: 0,
-        show_patient_type_selector: false,
-        zones: [{value: 0, text: '全部分区', select: true}],
-
-        show_advice_type_selector: false,
-        advice_type_selected: 0,
-        advice_types: [
-          {value: 0, text: '全部医嘱'},
-          {value: 1, text: '长期医嘱'},
-          {value: 3, text: '临时医嘱'}
-        ],
-
-        patient_types: [
-          {value: 0, text: '全部病人'},
-          {value: 1, text: '我的病人'},
-          {value: 2, text: '未执行病人'}
-        ],
-        patient_selected: 0,
-
-        scheduleMap: {}
-      }
-    },
-    computed: {
-      selected_date_str: function () {
-        return parseTime(this.selected_date, '{y}-{m}-{d}')
-      },
-      filtedScheduals: function () {
-        var scheduleMap = new Object()
-        if (this.zone_selected == 0) {
-          for (const key in this.scheduleMap) {
-            scheduleMap[key] = this.scheduleMap[key]
-          }
-        } else {
-          var zone_name = this.zones[this.zone_selected].text
-          scheduleMap[zone_name] = this.scheduleMap[zone_name]
+    filtedScheduals: function() {
+      var scheduleMap = new Object();
+      if (this.zone_selected == 0) {
+        for (const key in this.scheduleMap) {
+          scheduleMap[key] = this.scheduleMap[key];
         }
+      } else {
+        var zone_name = this.zones[this.zone_selected].text;
+        scheduleMap[zone_name] = this.scheduleMap[zone_name];
+      }
 
-        if (this.schedule_type_selected != 0) {
-          var _scheduleMap = {}
-          for (const key in scheduleMap) {
-            var origin_schedules = scheduleMap[key]
-            var schedules = []
-            for (let index = 0; index < origin_schedules.length; index++) {
-              const schedule = origin_schedules[index]
-              if (schedule.schedule_type == this.schedule_type_selected) {
-                schedules.push(schedule)
-              }
-            }
-            if (schedules.length > 0) {
-              _scheduleMap[key] = schedules
+      if (this.schedule_type_selected != 0) {
+        var _scheduleMap = {};
+        for (const key in scheduleMap) {
+          var origin_schedules = scheduleMap[key];
+          var schedules = [];
+          for (let index = 0; index < origin_schedules.length; index++) {
+            const schedule = origin_schedules[index];
+            if (schedule.schedule_type == this.schedule_type_selected) {
+              schedules.push(schedule);
             }
           }
-
-          scheduleMap = _scheduleMap
-        }
-        for (var key in scheduleMap) {
-          let mapArr = scheduleMap[key]
-          for (let i = 0; i < mapArr.length; i++) {
-            mapArr[i]['new_advice'] = []
+          if (schedules.length > 0) {
+            _scheduleMap[key] = schedules;
           }
         }
 
-        for (var key in scheduleMap) {
-          let mapArr = scheduleMap[key]
-          for (let i = 0; i < mapArr.length; i++) {
-            var maps = mapArr[i]
-            var resp_advices = maps.doctor_advice
-            if (resp_advices.length > 0) {
-              var newGroupObject = function () {
-                return Object.assign({}, {
-                  group_no: 0,
-                  advices: [],
-                })
-              }
-              var initGroupBlock = function (group, advice) {
-                group.group_no = advice.groupno
-              }
+        scheduleMap = _scheduleMap;
+      }
+      for (var key in scheduleMap) {
+        let mapArr = scheduleMap[key];
+        for (let i = 0; i < mapArr.length; i++) {
+          mapArr[i]["new_advice"] = [];
+        }
+      }
 
-              var advice_groups = []
-              var group = newGroupObject()
-              for (let index = 0; index < resp_advices.length; index++) {
-                const advice = resp_advices[index]
-                if (advice.groupno == 0) { // 老版本的医嘱
-                  if (advice.parent_id > 0) {
-                    if (advice_groups.length > 0) {
-                      var parent_group = advice_groups[advice_groups.length - 1]
-                      if (parent_group.advices.length > 0) {
-                        if (parent_group.advices[0].id == advice.parent_id) {
-                          parent_group.advices.push(advice)
-                        }
+      for (var key in scheduleMap) {
+        let mapArr = scheduleMap[key];
+        for (let i = 0; i < mapArr.length; i++) {
+          var maps = mapArr[i];
+          var resp_advices = maps.doctor_advice;
+          if (resp_advices.length > 0) {
+            var newGroupObject = function() {
+              return Object.assign(
+                {},
+                {
+                  group_no: 0,
+                  advices: []
+                }
+              );
+            };
+            var initGroupBlock = function(group, advice) {
+              group.group_no = advice.groupno;
+            };
+
+            var advice_groups = [];
+            var group = newGroupObject();
+            for (let index = 0; index < resp_advices.length; index++) {
+              const advice = resp_advices[index];
+              if (advice.groupno == 0) {
+                // 老版本的医嘱
+                if (advice.parent_id > 0) {
+                  if (advice_groups.length > 0) {
+                    var parent_group = advice_groups[advice_groups.length - 1];
+                    if (parent_group.advices.length > 0) {
+                      if (parent_group.advices[0].id == advice.parent_id) {
+                        parent_group.advices.push(advice);
                       }
                     }
-                    continue
-
-                  } else {
-                    if (group.group_no > 0) {
-                      advice_groups.push(group)
-                      group = newGroupObject()
-                    }
-
-                    initGroupBlock(group, advice)
-                    group.advices.push(advice)
-                    advice_groups.push(group)
-                    group = newGroupObject()
-                    continue
                   }
-
+                  continue;
                 } else {
-                  if (group.group_no > 0 && group.group_no != advice.groupno) {
-                    advice_groups.push(group)
-                    group = newGroupObject()
-                  }
-                  if (group.group_no == 0) {
-                    initGroupBlock(group, advice)
-                  }
-                  if (group.group_no == advice.groupno) {
-                    group.advices.push(advice)
+                  if (group.group_no > 0) {
+                    advice_groups.push(group);
+                    group = newGroupObject();
                   }
+
+                  initGroupBlock(group, advice);
+                  group.advices.push(advice);
+                  advice_groups.push(group);
+                  group = newGroupObject();
+                  continue;
+                }
+              } else {
+                if (group.group_no > 0 && group.group_no != advice.groupno) {
+                  advice_groups.push(group);
+                  group = newGroupObject();
+                }
+                if (group.group_no == 0) {
+                  initGroupBlock(group, advice);
+                }
+                if (group.group_no == advice.groupno) {
+                  group.advices.push(advice);
                 }
               }
-              if (group.group_no > 0) { // 上述的算法会导致最后一组没有加到advice_groups，这里要手动加上
-                advice_groups.push(group)
-              }
-              advice_groups = advice_groups
-            } else {
-              advice_groups = []
             }
-            maps.new_advice = advice_groups
+            if (group.group_no > 0) {
+              // 上述的算法会导致最后一组没有加到advice_groups，这里要手动加上
+              advice_groups.push(group);
+            }
+            advice_groups = advice_groups;
+          } else {
+            advice_groups = [];
           }
+          maps.new_advice = advice_groups;
         }
+      }
 
-        console.log(scheduleMap)
+      console.log(scheduleMap);
 
-        return scheduleMap
-      }
+      return scheduleMap;
+    }
+  },
+  created() {
+    this.requestSchedualDoctors();
+  },
+  methods: {
+    // getNumber: function (advice,schedule) {
+    //   console.log(advice)
+    //   if (advice.parent_id == 0 ) {
+    //     if(advice.dialysis_order && advice.dialysis_order.device_number && advice.dialysis_order.device_number.number.length > 0){
+    //       return advice.dialysis_order.device_number.number
+    //     }else{
+    //       return schedule.device_number.number
+    //     }
+    //   }
+    //
+    // },
+    clickfunction: function(val) {
+      // console.log(val);
+      this.$router.push({
+        path: "/details",
+        query: {
+          patient_id: val.patient.id,
+          date: this.selected_date.getTime() / 1000,
+          patient_name: val.patient.name
+        }
+      });
     },
-    created () {
-      this.requestSchedualDoctors()
+    handlePaitentType: function(index) {
+      this.patient_selected = index;
+      this.show_patient_type_selector = false;
+      this.requestSchedualDoctors();
     },
-    methods: {
-      // getNumber: function (advice,schedule) {
-      //   console.log(advice)
-      //   if (advice.parent_id == 0 ) {
-      //     if(advice.dialysis_order && advice.dialysis_order.device_number && advice.dialysis_order.device_number.number.length > 0){
-      //       return advice.dialysis_order.device_number.number
-      //     }else{
-      //       return schedule.device_number.number
-      //     }
-      //   }
-      //
-      // },
-      clickfunction: function (val) {
-        // console.log(val);
-        this.$router.push({
-          path: '/details',
-          query: {
-            patient_id: val.patient.id,
-            date: this.selected_date.getTime() / 1000,
-            patient_name: val.patient.name
-          }
-        })
-      },
-      handlePaitentType: function (index) {
-        this.patient_selected = index
-        this.show_patient_type_selector = false
-        this.requestSchedualDoctors()
-      },
-      openPicker () {
-        this.$refs.picker.open()
-      },
-      getAdaviceType (type, parent_id) {
-        if (parent_id == 0) {
-          if (type == 1) {
-            return '长嘱'
-          } else if (type == 2) {
-            return '临嘱'
-          } else if (type == 3) {
-            return '临嘱'
-          }
+    openPicker() {
+      this.$refs.picker.open();
+    },
+    getAdaviceType(type, parent_id) {
+      if (parent_id == 0) {
+        if (type == 1) {
+          return "长嘱";
+        } else if (type == 2) {
+          return "临嘱";
+        } else if (type == 3) {
+          return "临嘱";
         }
-      },
-      getName (val) {
-        console.log(this.admin_user)
+      }
+    },
+    getName(val) {
+      console.log(this.admin_user);
 
-        for (let i = 0; i < this.admin_user.length; i++) {
-          if (this.admin_user[i].id == val) {
-            return this.admin_user[i].name
-          }
+      for (let i = 0; i < this.admin_user.length; i++) {
+        if (this.admin_user[i].id == val) {
+          return this.admin_user[i].name;
         }
-      },
-      handletimeType: function (index) {
-        this.schedule_type_selected = index
-        this.show_sch_type_selector = false
-      },
-      handleAdviceType: function (index) {
-        this.advice_type_selected = index
-        this.show_advice_type_selector = false
-        this.requestSchedualDoctors()
-      },
-      handleZoneChange: function (index) {
-        this.zone_selected = index
-        this.show_zone_selector = false
-      },
-      parseTime: function (time, layout) {
-        // console.log(time);
-        if (time == 0) {
-          return ''
-        }
-        return parseTime(time, layout)
-      },
-      requestSchedualDoctors () {
-        getSchedualDoctors({
-          date: this.selected_date_str,
-          patient_type: this.patient_selected,
-          advice_type: 2
-        }).then(rs => {
-          var resp = rs.data
-          if (resp.state == 1) {
-            this.admin_user = resp.data.adminUser
-            var schedules = resp.data.scheduals
-            var zoneMap = {}
-            var scheduleMap = {}
-            for (let index = 0; index < schedules.length; index++) {
-              const schedule = schedules[index]
-              if (schedule.doctor_advice.length == 0) {
-                continue
-              }
-              if (scheduleMap[schedule.device_number.zone.name] == null) {
-                scheduleMap[schedule.device_number.zone.name] = []
-              }
-              scheduleMap[schedule.device_number.zone.name].push(schedule)
-              if (zoneMap[schedule.device_number.zone.name] == null) {
-                zoneMap[schedule.device_number.zone.name] = schedule.device_number.zone
-              }
+      }
+    },
+    handletimeType: function(index) {
+      this.schedule_type_selected = index;
+      this.show_sch_type_selector = false;
+    },
+    handleAdviceType: function(index) {
+      this.advice_type_selected = index;
+      this.show_advice_type_selector = false;
+      this.requestSchedualDoctors();
+    },
+    handleZoneChange: function(index) {
+      this.zone_selected = index;
+      this.show_zone_selector = false;
+    },
+    parseTime: function(time, layout) {
+      // console.log(time);
+      if (time == 0) {
+        return "";
+      }
+      return parseTime(time, layout);
+    },
+    requestSchedualDoctors() {
+      getSchedualDoctors({
+        date: this.selected_date_str,
+        patient_type: this.patient_selected,
+        advice_type: 2
+      }).then(rs => {
+        var resp = rs.data;
+        if (resp.state == 1) {
+          this.admin_user = resp.data.adminUser;
+          var schedules = resp.data.scheduals;
+          var zoneMap = {};
+          var scheduleMap = {};
+          for (let index = 0; index < schedules.length; index++) {
+            const schedule = schedules[index];
+            if (schedule.doctor_advice.length == 0) {
+              continue;
             }
-
-            var zones = []
-            zones.push({value: 0, text: '全部分区'})
-            for (var zoneName in zoneMap) {
-              zones.push({value: zoneMap[zoneName].id, text: zoneName})
+            if (scheduleMap[schedule.device_number.zone.name] == null) {
+              scheduleMap[schedule.device_number.zone.name] = [];
             }
+            scheduleMap[schedule.device_number.zone.name].push(schedule);
+            if (zoneMap[schedule.device_number.zone.name] == null) {
+              zoneMap[schedule.device_number.zone.name] =
+                schedule.device_number.zone;
+            }
+          }
 
-            zones = zones.sort(function (a, b) {
-              return a.value > b.value
-            })
-            this.zones = zones
-
-            this.scheduleMap = scheduleMap
-          } else {
-            this.$toast({
-              message: resp.msg
-            })
+          var zones = [];
+          zones.push({ value: 0, text: "全部分区" });
+          for (var zoneName in zoneMap) {
+            zones.push({ value: zoneMap[zoneName].id, text: zoneName });
           }
-        })
-      },
-      adviceDesc (advice) {
-      }
-    }
+
+          zones = zones.sort(function(a, b) {
+            return a.value > b.value;
+          });
+          this.zones = zones;
+
+          this.scheduleMap = scheduleMap;
+        } else {
+          this.$toast({
+            message: resp.msg
+          });
+        }
+      });
+    },
+    adviceDesc(advice) {}
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .top {
+.top {
   .hospital {
-  width: 2rem;
+    width: 2rem;
   }
   .TopTitle {
-  font-size: 0.36rem;
-  color: $title-color;
-  font-weight: normal;
+    font-size: 0.36rem;
+    color: $title-color;
+    font-weight: normal;
   }
   padding: 0.3rem 0.3rem;
   @include display-flex;
@@ -455,16 +525,16 @@
   @include justify-content-between;
   border-bottom: 1px #e5e5e5 solid;
   .title {
-  font-size: 0.3rem;
-  font-weight: bold;
-  color: $pgh-color;
+    font-size: 0.3rem;
+    font-weight: bold;
+    color: $pgh-color;
   }
   .iconfont {
-  font-size: 0.4rem;
-  color: #a8b3ba;
+    font-size: 0.4rem;
+    color: #a8b3ba;
   }
-  }
-  .search {
+}
+.search {
   background: #ebf1f7;
   border-radius: 30px;
   padding: 0 0.3rem;
@@ -473,17 +543,17 @@
   color: #a8b3ba;
 
   .iconfont {
-  color: #a8b3ba;
-  font-size: 0.28rem;
+    color: #a8b3ba;
+    font-size: 0.28rem;
   }
   .searchInput {
-  font-size: 0.28rem;
-  border: none;
-  outline: none;
-  background: #ebf1f7;
-  }
+    font-size: 0.28rem;
+    border: none;
+    outline: none;
+    background: #ebf1f7;
   }
-  .choice {
+}
+.choice {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
   top: 63px;
@@ -491,52 +561,57 @@
   z-index: 66;
   left: 1.58rem;
   background: #fff;
-  ul {
-  @include display-flex;
-  @include align-items-center;
-  @include text-align;
-  @include justify-content-between;
-  width: 70%;
-  margin: 0 auto;
-  font-size: 0.32rem;
-  color: $pgh-color;
-  li {
-  @include display-flex;
-  @include align-items-center;
-  @include text-align;
-  @include justify-content-between;
-  padding: 0.3rem 0;
-  font-size: 0.32rem;
-  .iconfont {
-  margin: 0 0.1rem;
-  }
-  .line {
-  background: #a8b3ba;
-  width: 0.2rem;
-  height: 1px;
-  margin: 0 0.2rem;
-  display: inline-block;
-  }
-  }
+  @media only screen and (max-width: 812px) {
+    top: 43px !important;
   }
+  ul {
+    @include display-flex;
+    @include align-items-center;
+    @include text-align;
+    @include justify-content-between;
+    width: 70%;
+    margin: 0 auto;
+    font-size: 0.32rem;
+    color: $pgh-color;
+    li {
+      @include display-flex;
+      @include align-items-center;
+      @include text-align;
+      @include justify-content-between;
+      padding: 0.3rem 0;
+      font-size: 0.32rem;
+      .iconfont {
+        margin: 0 0.1rem;
+      }
+      .line {
+        background: #a8b3ba;
+        width: 0.2rem;
+        height: 1px;
+        margin: 0 0.2rem;
+        display: inline-block;
+      }
+    }
   }
-  .DialysisAdvice{
-  padding-top:115px;
+}
+.DialysisAdvice {
+  padding-top: 115px;
   background: #fff;
   min-height: calc(100vh - 2px);
+  @media only screen and (max-width: 812px) {
+    padding-top: 80px !important;
   }
+}
 
-
-  .advice_content {
+.advice_content {
   text-align: left;
   padding-left: 5px;
   padding-right: 5px;
   // background: #eff6fc;
-  }
-  .subadvice_content {
+}
+.subadvice_content {
   text-align: left;
   padding-left: 25px;
   padding-right: 5px;
   // background: #fafcfe;
-  }
+}
 </style>

src/pages/advice/NormalAdviceTable.vue

@@ -2,30 +2,72 @@
   <div class="mainBox">
     <div class="choice">
       <ul>
-
-        <el-popover placement="bottom" trigger="click" v-model="show_patient_type_selector">
-          <li slot="reference">{{patient_types[patient_selected].text}}<span class="iconfont">&#xe74a;</span></li>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_patient_type_selector"
+        >
+          <li slot="reference">
+            {{ patient_types[patient_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="type in patient_types" :key="type.value" @click="handlePaitentType(type.value)" :class="advice_type_selected == type.value ? 'tick' : ''" >{{type.text}}</li>
+              <li
+                v-for="type in patient_types"
+                :key="type.value"
+                @click="handlePaitentType(type.value)"
+                :class="advice_type_selected == type.value ? 'tick' : ''"
+              >
+                {{ type.text }}
+              </li>
             </ul>
           </div>
         </el-popover>
 
-
-        <el-popover placement="bottom" trigger="click" v-model="show_zone_selector">
-          <li slot="reference">{{zones[zone_selected].text}}<span class="iconfont">&#xe74a;</span></li>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_zone_selector"
+        >
+          <li slot="reference">
+            {{ zones[zone_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="(zone, index) in zones" :key="zone.value" @click="handleZoneChange(index)"  :class="zone_selected == index ? 'tick' : ''">{{zone.text}}</li>
+              <li
+                v-for="(zone, index) in zones"
+                :key="zone.value"
+                @click="handleZoneChange(index)"
+                :class="zone_selected == index ? 'tick' : ''"
+              >
+                {{ zone.text }}
+              </li>
             </ul>
           </div>
         </el-popover>
-        <el-popover placement="bottom" trigger="click" v-model="show_sch_type_selector">
-          <li slot="reference">{{schedule_types[schedule_type_selected].text}}<span class="iconfont">&#xe74a;</span></li>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="show_sch_type_selector"
+        >
+          <li slot="reference">
+            {{ schedule_types[schedule_type_selected].text
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
           <div class="popover-demo-content">
             <ul>
-              <li v-for="scheduleType in schedule_types" :key="scheduleType.value" @click="handletimeType(scheduleType.value)" :class="schedule_type_selected == scheduleType.value ? 'tick' : ''" >{{scheduleType.text}}</li>
+              <li
+                v-for="scheduleType in schedule_types"
+                :key="scheduleType.value"
+                @click="handletimeType(scheduleType.value)"
+                :class="
+                  schedule_type_selected == scheduleType.value ? 'tick' : ''
+                "
+              >
+                {{ scheduleType.text }}
+              </li>
             </ul>
           </div>
         </el-popover>
@@ -45,7 +87,10 @@
       </ul>
     </div>
 
-    <div style="width:100%;overflow:hildden;overflow-x:auto;" class="NormalAdvice">
+    <div
+      style="width:100%;overflow:hildden;overflow-x:auto;"
+      class="NormalAdvice"
+    >
       <div class="blueBorder"></div>
       <table class="table">
         <tr>
@@ -61,9 +106,6 @@
           <th width="100px">校对时间</th>
           <th width="50px">开嘱医生</th>
           <th width="100px">开嘱时间</th>
-
-
-
         </tr>
         <template v-for="(schedules, zone_name, index) in filtedScheduals">
           <tr :key="index">
@@ -79,39 +121,88 @@
             <td></td>
             <td></td>
             <td></td>
-
           </tr>
-          <template v-for="(schedule) in schedules">
-            <tr v-for="(advice, advice_index) in schedule.doctor_advice" :key="advice.id + '_' + advice_index + '_' + index"  @click="clickfunction(schedule)">
+          <template v-for="schedule in schedules">
+            <tr
+              v-for="(advice, advice_index) in schedule.doctor_advice"
+              :key="advice.id + '_' + advice_index + '_' + index"
+              @click="clickfunction(schedule)"
+            >
               <!--<td>{{ advice.parent_id == 0 && advice.dialysis_order&&advice.dialysis_order.device_number&& advice.dialysis_order.device_number.number.length > 0 ? advice.dialysis_order.device_number.number : schedule.device_number.number }}</td>-->
               <!--<td>{{getNumber(advice)}}</td>-->
               <td>{{ advice.parent_id == 0 ? schedule.patient.name : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? schedule.patient.dialysis_no : "" }}</td>
-              <td>{{ getAdaviceType(advice.advice_type,advice.parent_id)}}</td>
-              <td>{{ advice.parent_id == 0 ? parseTime(advice.start_time, "{m}-{d} {h}:{i}") : "" }}</td>
               <td>
-                <span >{{advice.advice_name }}</span>
-                <span >{{advice.advice_desc}}{{advice.drug_spec_unit}}</span>
-
-                <span v-if="advice.prescribing_number">{{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span>
-                <span v-if="advice.single_dose"> 单次用量 {{advice.single_dose}}{{advice.single_dose_unit}}</span>
-                <span >{{advice.delivery_way}}</span>
-                <span >{{advice.execution_frequency}}</span>
+                {{ advice.parent_id == 0 ? schedule.patient.dialysis_no : "" }}
+              </td>
+              <td>
+                {{ getAdaviceType(advice.advice_type, advice.parent_id) }}
+              </td>
+              <td>
+                {{
+                  advice.parent_id == 0
+                    ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
+                    : ""
+                }}
+              </td>
+              <td>
+                <span>{{ advice.advice_name }}</span>
+                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
+
+                <span v-if="advice.prescribing_number"
+                  >{{ advice.prescribing_number
+                  }}{{ advice.prescribing_number_unit }}</span
+                >
+                <span v-if="advice.single_dose">
+                  单次用量 {{ advice.single_dose
+                  }}{{ advice.single_dose_unit }}</span
+                >
+                <span>{{ advice.delivery_way }}</span>
+                <span>{{ advice.execution_frequency }}</span>
+              </td>
+              <td>
+                {{
+                  advice.parent_id == 0
+                    ? parseTime(advice.execution_time, "{m}-{d} {h}:{i}")
+                    : ""
+                }}
+              </td>
+              <td>
+                {{
+                  advice.parent_id == 0 ? getName(advice.execution_staff) : ""
+                }}
+              </td>
+              <td>
+                {{ advice.parent_id == 0 ? getName(advice.checker) : "" }}
+              </td>
+              <td>
+                {{
+                  advice.parent_id == 0
+                    ? parseTime(advice.check_time, "{m}-{d} {h}:{i}")
+                    : ""
+                }}
+              </td>
+              <td>
+                {{ advice.parent_id == 0 ? getName(advice.advice_doctor) : "" }}
+              </td>
+              <td>
+                {{
+                  advice.parent_id == 0
+                    ? parseTime(advice.created_time, "{m}-{d} {h}:{i}")
+                    : ""
+                }}
               </td>
-              <td>{{ advice.parent_id == 0 ? parseTime(advice.execution_time, "{m}-{d} {h}:{i}") : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? getName(advice.execution_staff) : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? getName(advice.checker) : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? parseTime(advice.check_time, "{m}-{d} {h}:{i}") : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? getName(advice.advice_doctor) : "" }}</td>
-              <td>{{ advice.parent_id == 0 ? parseTime(advice.created_time, "{m}-{d} {h}:{i}") : "" }}</td>
-
-
             </tr>
           </template>
         </template>
       </table>
-      <div class="NoData" v-show="zones.length  <= 1"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>
 
+      <div class="NoData" v-show="zones.length <= 1">
+        <img
+          style="margin-top: 50px; margin-bottom: 50px"
+          src="@/assets/login/data.jpg"
+          alt=""
+        />
+      </div>
     </div>
     <!--<div class="NoData" v-show="zones.length <= 1"><img src="@/assets/login/data.jpg" alt=""></div>-->
 
@@ -122,208 +213,215 @@
       year-format="{value} "
       month-format="{value} "
       date-format="{value} "
-      @confirm="requestSchedualDoctors">
+      @confirm="requestSchedualDoctors"
+    >
     </mt-datetime-picker>
   </div>
 </template>
 
 <script>
-  import SideBar from "@/pages/layout/SideBar";
-  import { parseTime } from "@/utils";
-  import { getSchedualDoctors } from "@/api/advice";
-  export default {
-    name: "DialysisAdviceTable",
-    components: {
-      SideBar
-    },
-    data() {
-      return {
-        selected_date: new Date(),
-        admin_user:[],
-
-        show_sch_type_selector: false,
-        schedule_type_selected: 0,
-        schedule_types: [
-          { value: 0, text: "全部班次" },
-          { value: 1, text: "上午" },
-          { value: 2, text: "下午" },
-          { value: 3, text: "晚上" }
-        ],
-
-        show_zone_selector: false,
-        zone_selected: 0,
-        show_patient_type_selector:false,
-        zones: [{ value: 0, text: "全部分区", select: true }],
-
-        show_advice_type_selector: false,
-        advice_type_selected: 0,
-        advice_types: [
-          { value: 0, text: "全部医嘱" },
-          { value: 1, text: "长期医嘱" },
-          { value: 3, text: "临时医嘱" }
-        ],
-
-        patient_types: [
-          { value: 0, text: "全部病人" },
-          { value: 1, text: "我的病人" },
-          { value: 2, text: "未执行病人" },
-        ],
-        patient_selected: 0,
-
-        scheduleMap: {}
-      };
+import SideBar from "@/pages/layout/SideBar";
+import { parseTime } from "@/utils";
+import { getSchedualDoctors } from "@/api/advice";
+export default {
+  name: "DialysisAdviceTable",
+  components: {
+    SideBar
+  },
+  data() {
+    return {
+      selected_date: new Date(),
+      admin_user: [],
+
+      show_sch_type_selector: false,
+      schedule_type_selected: 0,
+      schedule_types: [
+        { value: 0, text: "全部班次" },
+        { value: 1, text: "上午" },
+        { value: 2, text: "下午" },
+        { value: 3, text: "晚上" }
+      ],
+
+      show_zone_selector: false,
+      zone_selected: 0,
+      show_patient_type_selector: false,
+      zones: [{ value: 0, text: "全部分区", select: true }],
+
+      show_advice_type_selector: false,
+      advice_type_selected: 0,
+      advice_types: [
+        { value: 0, text: "全部医嘱" },
+        { value: 1, text: "长期医嘱" },
+        { value: 3, text: "临时医嘱" }
+      ],
+
+      patient_types: [
+        { value: 0, text: "全部病人" },
+        { value: 1, text: "我的病人" },
+        { value: 2, text: "未执行病人" }
+      ],
+      patient_selected: 0,
+
+      scheduleMap: {}
+    };
+  },
+  computed: {
+    selected_date_str: function() {
+      return parseTime(this.selected_date, "{y}-{m}-{d}");
     },
-    computed: {
-      selected_date_str: function() {
-        return parseTime(this.selected_date, "{y}-{m}-{d}");
-      },
-      filtedScheduals: function() {
-        var scheduleMap = new Object();
-        if (this.zone_selected == 0) {
-          for (const key in this.scheduleMap) {
-            scheduleMap[key] = this.scheduleMap[key];
-          }
-        } else {
-          var zone_name = this.zones[this.zone_selected].text;
-          scheduleMap[zone_name] = this.scheduleMap[zone_name];
+    filtedScheduals: function() {
+      var scheduleMap = new Object();
+      if (this.zone_selected == 0) {
+        for (const key in this.scheduleMap) {
+          scheduleMap[key] = this.scheduleMap[key];
         }
+      } else {
+        var zone_name = this.zones[this.zone_selected].text;
+        scheduleMap[zone_name] = this.scheduleMap[zone_name];
+      }
 
-        if (this.schedule_type_selected != 0) {
-          var _scheduleMap = {};
-          for (const key in scheduleMap) {
-            var origin_schedules = scheduleMap[key];
-            var schedules = [];
-            for (let index = 0; index < origin_schedules.length; index++) {
-              const schedule = origin_schedules[index];
-              if (schedule.schedule_type == this.schedule_type_selected) {
-                schedules.push(schedule);
-              }
-            }
-            if (schedules.length > 0) {
-              _scheduleMap[key] = schedules;
+      if (this.schedule_type_selected != 0) {
+        var _scheduleMap = {};
+        for (const key in scheduleMap) {
+          var origin_schedules = scheduleMap[key];
+          var schedules = [];
+          for (let index = 0; index < origin_schedules.length; index++) {
+            const schedule = origin_schedules[index];
+            if (schedule.schedule_type == this.schedule_type_selected) {
+              schedules.push(schedule);
             }
           }
-
-          scheduleMap = _scheduleMap;
+          if (schedules.length > 0) {
+            _scheduleMap[key] = schedules;
+          }
         }
-        return scheduleMap;
+
+        scheduleMap = _scheduleMap;
+      }
+      return scheduleMap;
+    }
+  },
+  created() {
+    this.requestSchedualDoctors();
+  },
+  methods: {
+    getNumber: function(advice) {
+      if (
+        advice.parent_id == 0 &&
+        advice.dialysis_order &&
+        advice.dialysis_order.device_number &&
+        advice.dialysis_order.device_number.number.length > 0
+      ) {
+        console.log("111111");
+      } else {
+        console.log("222222");
       }
     },
-    created() {
+    clickfunction: function(val) {
+      // console.log(val);
+      this.$router.push({
+        path: "/details",
+        query: {
+          patient_id: val.patient.id,
+          date: this.selected_date.getTime() / 1000,
+          patient_name: val.patient.name
+        }
+      });
+    },
+    handlePaitentType: function(index) {
+      this.patient_selected = index;
+      this.show_patient_type_selector = false;
       this.requestSchedualDoctors();
     },
-    methods: {
-      getNumber:function(advice){
-        if(advice.parent_id == 0 && advice.dialysis_order&&advice.dialysis_order.device_number&& advice.dialysis_order.device_number.number.length > 0){
-          console.log("111111")
-        }else{
-          console.log("222222")
-        }
-
-
-      },
-      clickfunction: function(val) {
-        // console.log(val);
-        this.$router.push({
-          path: "/details",
-          query: {
-            patient_id: val.patient.id,
-            date: this.selected_date.getTime() / 1000,
-            patient_name: val.patient.name
-          }
-        });
-      }, handlePaitentType:function(index){
-        this.patient_selected = index;
-        this.show_patient_type_selector = false;
-        this.requestSchedualDoctors();
-
-      },
-      openPicker() {
-        this.$refs.picker.open();
-      },  getAdaviceType(type,parent_id) {
-        if(parent_id == 0) {
-          if (type == 1) {
-            return "长嘱";
-          } else if (type == 2) {
-            return "临嘱";
-          } else if (type == 3) {
-            return "临嘱";
-          }
-        }
-      },getName(val){
-        for(let i = 0; i < this.admin_user.length; i++){
-          if(this.admin_user[i].id == val){
-            return this.admin_user[i].name
-          }
+    openPicker() {
+      this.$refs.picker.open();
+    },
+    getAdaviceType(type, parent_id) {
+      if (parent_id == 0) {
+        if (type == 1) {
+          return "长嘱";
+        } else if (type == 2) {
+          return "临嘱";
+        } else if (type == 3) {
+          return "临嘱";
         }
-      },
-      handletimeType: function(index) {
-        this.schedule_type_selected = index;
-        this.show_sch_type_selector = false;
-      },
-      handleAdviceType: function(index) {
-        this.advice_type_selected = index;
-        this.show_advice_type_selector = false;
-        this.requestSchedualDoctors();
-      },
-      handleZoneChange: function(index) {
-        this.zone_selected = index;
-        this.show_zone_selector = false;
-      },
-      parseTime: function(time, layout) {
-        if (time == 0) {
-          return "";
+      }
+    },
+    getName(val) {
+      for (let i = 0; i < this.admin_user.length; i++) {
+        if (this.admin_user[i].id == val) {
+          return this.admin_user[i].name;
         }
-        return parseTime(time, layout);
-      },
-      requestSchedualDoctors() {
-        getSchedualDoctors({
-          date: this.selected_date_str,
-          patient_type:this.patient_selected,
-          advice_type: this.advice_type_selected,
-        }).then(rs => {
-          var resp = rs.data;
-          if (resp.state == 1) {
-            this.admin_user = resp.data.adminUser
-            var schedules = resp.data.scheduals;
-            var zoneMap = {};
-            var scheduleMap = {};
-            for (let index = 0; index < schedules.length; index++) {
-              const schedule = schedules[index];
-              if (schedule.doctor_advice.length == 0) {
-                continue;
-              }
-              if (scheduleMap[schedule.device_number.zone.name] == null) {
-                scheduleMap[schedule.device_number.zone.name] = [];
-              }
-              scheduleMap[schedule.device_number.zone.name].push(schedule);
-              if (zoneMap[schedule.device_number.zone.name] == null) {
-                zoneMap[schedule.device_number.zone.name] = schedule.device_number.zone;
-              }
+      }
+    },
+    handletimeType: function(index) {
+      this.schedule_type_selected = index;
+      this.show_sch_type_selector = false;
+    },
+    handleAdviceType: function(index) {
+      this.advice_type_selected = index;
+      this.show_advice_type_selector = false;
+      this.requestSchedualDoctors();
+    },
+    handleZoneChange: function(index) {
+      this.zone_selected = index;
+      this.show_zone_selector = false;
+    },
+    parseTime: function(time, layout) {
+      if (time == 0) {
+        return "";
+      }
+      return parseTime(time, layout);
+    },
+    requestSchedualDoctors() {
+      getSchedualDoctors({
+        date: this.selected_date_str,
+        patient_type: this.patient_selected,
+        advice_type: this.advice_type_selected
+      }).then(rs => {
+        var resp = rs.data;
+        if (resp.state == 1) {
+          this.admin_user = resp.data.adminUser;
+          var schedules = resp.data.scheduals;
+          var zoneMap = {};
+          var scheduleMap = {};
+          for (let index = 0; index < schedules.length; index++) {
+            const schedule = schedules[index];
+            if (schedule.doctor_advice.length == 0) {
+              continue;
             }
-
-            var zones = [];
-            zones.push({ value: 0, text: "全部分区" });
-            for (var zoneName in zoneMap) {
-              zones.push({ value: zoneMap[zoneName].id, text: zoneName });
+            if (scheduleMap[schedule.device_number.zone.name] == null) {
+              scheduleMap[schedule.device_number.zone.name] = [];
             }
+            scheduleMap[schedule.device_number.zone.name].push(schedule);
+            if (zoneMap[schedule.device_number.zone.name] == null) {
+              zoneMap[schedule.device_number.zone.name] =
+                schedule.device_number.zone;
+            }
+          }
 
-            zones = zones.sort(function(a, b) {
-              return a.value > b.value;
-            });
-            this.zones = zones;
-
-            this.scheduleMap = scheduleMap;
-          } else {
-            this.$toast({
-              message: resp.msg
-            });
+          var zones = [];
+          zones.push({ value: 0, text: "全部分区" });
+          for (var zoneName in zoneMap) {
+            zones.push({ value: zoneMap[zoneName].id, text: zoneName });
           }
-        });
-      },
-      adviceDesc(advice) {}
-    }
-  };
+
+          zones = zones.sort(function(a, b) {
+            return a.value > b.value;
+          });
+          this.zones = zones;
+
+          this.scheduleMap = scheduleMap;
+        } else {
+          this.$toast({
+            message: resp.msg
+          });
+        }
+      });
+    },
+    adviceDesc(advice) {}
+  }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
@@ -373,12 +471,15 @@
 }
 .choice {
   border-bottom: 1px #e5e5e5 solid;
-   position: fixed;
-    top: 63px;
-    right: 0;
-    z-index: 66;
-    left: 1.58rem;
-    background: #fff;
+  position: fixed;
+  top: 63px;
+  right: 0;
+  z-index: 66;
+  left: 1.58rem;
+  background: #fff;
+  @media only screen and (max-width: 812px) {
+    top: 43px !important;
+  }
   ul {
     @include display-flex;
     @include align-items-center;
@@ -410,11 +511,12 @@
 }
 .table {
 }
-.NormalAdvice{
-  padding-top:115px;
+.NormalAdvice {
+  padding-top: 115px;
   background: #fff;
   min-height: calc(100vh - 2px);
+  @media only screen and (max-width: 812px) {
+    padding-top: 80px !important;
+  }
 }
-
-
 </style>

src/pages/main/DialysisArea.vue

@@ -1,85 +1,112 @@
 <template>
   <div>
     <div v-loading="loading">
-
-    <div class="screening">
-      <ul>
-        <el-popover
-          v-model="zone_options_visible"
-          placement="bottom"
-          trigger="click">
-          <li slot="reference">
-            {{ zones.length <= 1 && zone_selected > 0 ? "全部分区" : zones[zone_selected].text }}
-            <span class="iconfont">&#xe74a;</span>
-          </li>
-          <div class="popover-demo-content">
-            <ul>
-              <li
-                v-for="(zone, index) in zones"
-                :key="zone.value"
-                @click="handleZoneChange(index)"
-                :class="zone_selected == index ? 'tick' : ''"
-              >{{zone.text}}</li>
-            </ul>
-          </div>
-        </el-popover>
-
-        <el-popover
-          v-model="sch_type_options_visible"
-          placement="bottom"
-          trigger="click">
-          <li slot="reference">
-            {{ schedual_types[schedual_type_selected].text}}
+      <div class="screening">
+        <ul>
+          <el-popover
+            v-model="zone_options_visible"
+            placement="bottom"
+            trigger="click"
+          >
+            <li slot="reference">
+              {{
+                zones.length <= 1 && zone_selected > 0
+                  ? "全部分区"
+                  : zones[zone_selected].text
+              }}
+              <span class="iconfont">&#xe74a;</span>
+            </li>
+            <div class="popover-demo-content">
+              <ul>
+                <li
+                  v-for="(zone, index) in zones"
+                  :key="zone.value"
+                  @click="handleZoneChange(index)"
+                  :class="zone_selected == index ? 'tick' : ''"
+                >
+                  {{ zone.text }}
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+
+          <el-popover
+            v-model="sch_type_options_visible"
+            placement="bottom"
+            trigger="click"
+          >
+            <li slot="reference">
+              {{ schedual_types[schedual_type_selected].text }}
+              <span class="iconfont">&#xe74a;</span>
+            </li>
+            <div class="popover-demo-content">
+              <ul>
+                <li
+                  v-for="schedualType in schedual_types"
+                  :key="schedualType.value"
+                  @click="handletimeType(schedualType.value)"
+                  :class="
+                    schedual_type_selected == schedualType.value ? 'tick' : ''
+                  "
+                >
+                  {{ schedualType.text }}
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+
+          <li @click="openPicker()">
+            {{ selected_date_str }}
             <span class="iconfont">&#xe74a;</span>
           </li>
-          <div class="popover-demo-content">
-            <ul>
-              <li
-                v-for="schedualType in schedual_types"
-                :key="schedualType.value"
-                @click="handletimeType(schedualType.value)"
-                :class="schedual_type_selected == schedualType.value ? 'tick' : ''"
-              >{{schedualType.text}}</li>
-            </ul>
-          </div>
-        </el-popover>
-
-        <li @click="openPicker()">
-          {{selected_date_str}}
-          <span class="iconfont">&#xe74a;</span>
-        </li>
-      </ul>
-    </div>
-    <div class="stateBox">
-      <div v-for="(item, index) in filtedScheduals" :key="index">
-        <h2 class="title">{{item.zone_name}}</h2>
-        <patient-box class="clearfix" :patients="item.scheduals"></patient-box>
+        </ul>
       </div>
-      <div class="NoData" v-if="filtedScheduals.length == 0&&networkStates">
-        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt>
+      <div class="stateBox">
+        <div v-for="(item, index) in filtedScheduals" :key="index">
+          <h2 class="title">{{ item.zone_name }}</h2>
+          <patient-box
+            class="clearfix"
+            :patients="item.scheduals"
+          ></patient-box>
+        </div>
+        <div class="NoData" v-if="filtedScheduals.length == 0 && networkStates">
+          <img
+            style="margin-top: 50px; margin-bottom: 50px"
+            src="@/assets/login/data.jpg"
+            alt
+          />
+        </div>
+        <div
+          class="NoData"
+          v-if="!networkStates"
+          style="display: block;text-align: center"
+        >
+          <p style="margin-top: 100px;font-size: 18px">
+            网络异常，请点击重新加载
+          </p>
+
+          <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
+          <van-button
+            slot="button"
+            size="normal"
+            type="info"
+            style="display:block;margin:0 auto"
+            @click="reloads()"
+            >重新加载
+          </van-button>
+        </div>
       </div>
-      <div class="NoData" v-if="!networkStates" style="display: block;text-align: center">
-        <p  style="margin-top: 100px;font-size: 18px">网络异常，请点击重新加载</p>
-
-
-        <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
-        <van-button  slot="button" size="normal" type="info" style="display:block;margin:0 auto"  @click="reloads()">重新加载
-        </van-button>
-      </div>
-
+      <mt-datetime-picker
+        v-model="selected_date"
+        ref="picker"
+        type="date"
+        year-format="{value} "
+        month-format="{value} "
+        date-format="{value} "
+        @confirm="handleScheduleDateChange"
+      ></mt-datetime-picker>
     </div>
-    <mt-datetime-picker
-      v-model="selected_date"
-      ref="picker"
-      type="date"
-      year-format="{value} "
-      month-format="{value} "
-      date-format="{value} "
-      @confirm="handleScheduleDateChange"
-    ></mt-datetime-picker>
   </div>
-  </div>
-
 </template>
 
 <script>
@@ -88,7 +115,7 @@ import { Popover } from "vux";
 import { Datetime } from "vux";
 import { parseTime } from "@/utils/index";
 import { getDialysisScheduals } from "@/api/dialysis";
-import {Toast} from 'vant'
+import { Toast } from "vant";
 
 export default {
   name: "DialysisArea",
@@ -97,13 +124,13 @@ export default {
     Popover,
     Datetime
   },
-  inject: ['reload'],
+  inject: ["reload"],
   data() {
     return {
-      loading:false,
+      loading: false,
 
-      networkStates:true,
-      timer:null,
+      networkStates: true,
+      timer: null,
       selected_date: this.$store.getters.app.dialysis_area.schedule_date, //new Date(),
       schedual_types: [
         { value: 0, text: "全部班", select: true },
@@ -119,7 +146,7 @@ export default {
       dialysis_scheduals: [],
 
       zone_options_visible: false,
-      sch_type_options_visible: false,
+      sch_type_options_visible: false
     };
   },
   props: {
@@ -211,18 +238,18 @@ export default {
   created() {
     this.requestDialysisScheduals();
   },
-  mounted(){
-  this.timer =   window.setInterval(() => {
-      setTimeout(this.requestDialysisScheduals(), 0)
-    }, 30000)
+  mounted() {
+    this.timer = window.setInterval(() => {
+      setTimeout(this.requestDialysisScheduals(), 0);
+    }, 30000);
   },
   beforeDestroy() {
     clearInterval(this.timer);
     this.timer = null;
   },
   methods: {
-    reloads:function(){
-      this.reload()
+    reloads: function() {
+      this.reload();
     },
     handletimeType: function(index) {
       this.sch_type_options_visible = false;
@@ -259,16 +286,14 @@ export default {
 
     requestDialysisScheduals() {
       // this.$toast.loading({forbidClick: true, duration: 0})
-      this.loading = true
+      this.loading = true;
       var type = 0;
       getDialysisScheduals({ type: type, date: this.selected_date_str })
         .then(rs => {
-          this.networkStates = true
+          this.networkStates = true;
           var resp = rs.data;
           if (resp.state == 1) {
-            this.loading = false
-
-
+            this.loading = false;
 
             // console.log(resp.data)
             var scheduals = resp.data.scheduals;
@@ -314,8 +339,7 @@ export default {
             }
             this.dialysis_scheduals = dialysis_scheduals;
           } else {
-            this.loading = false
-
+            this.loading = false;
 
             this.$toast({
               message: resp.msg
@@ -323,27 +347,23 @@ export default {
           }
         })
         .catch(error => {
-          this.loading = false
-
-
+          this.loading = false;
 
           //超时之后在这里捕抓错误信息.
           if (error.response) {
-            this.networkStates = false
+            this.networkStates = false;
 
-
-            console.log('error.response')
+            console.log("error.response");
             console.log(error.response);
           } else if (error.request) {
-            this.networkStates = false
+            this.networkStates = false;
 
             // if(error.request.readyState == 4 && error.request.status == 0){
             //   //我在这里重新请求
             //   this.networkStates = false
             // }
           } else {
-
-            this.networkStates = false
+            this.networkStates = false;
           }
         });
     },
@@ -363,6 +383,9 @@ export default {
   z-index: 66;
   left: 1.58rem;
   background: #fff;
+  @media only screen and (max-width: 812px) {
+    top: 50px !important;
+  }
   ul {
     @include display-flex;
     @include align-items-center;
@@ -378,6 +401,9 @@ export default {
         font-size: 0.32rem;
         color: #a8b3ba;
         margin-left: 0.1rem;
+        @media only screen and (max-width: 812px) {
+          font-size: 12px !important;
+        }
       }
     }
   }
@@ -395,18 +421,17 @@ export default {
   }
 }
 
-  .shadow{
-  width:100%;
-  height:100%;
-  position:absolute;
-  left:0;
-  top:0;
-  z-index:998;
-  background-color:#000;
-  opacity:0.6;
-  display:none;
-  }
-
+.shadow {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 998;
+  background-color: #000;
+  opacity: 0.6;
+  display: none;
+}
 </style>
 
 <style>
@@ -421,4 +446,3 @@ export default {
   }
 }
 </style>
-

src/pages/main/WaitingArea.vue

@@ -1,435 +1,470 @@
 <template>
   <div>
     <div v-loading="loading">
-
-    <div class="screening">
-      <!--<div @click="reloads()">刷新</div>-->
-      <ul>
-        <li v-for="(item,i) in menuList" :class="select_index == i ? 'active' : ''" @click="menuTabClick(i)"
-            :key="i">{{ item.label + (item.count > 0 ? '(' + item.count + ')' : '') }}
-        </li>
-
-
-        <el-popover
-          v-model="zone_options_visible"
-          placement="bottom"
-          trigger="click">
-          <li slot="reference">
-            {{ zone_options[zone_selected].text }}<span class="iconfont">&#xe74a;</span>
+      <div class="screening">
+        <!--<div @click="reloads()">刷新</div>-->
+        <ul>
+          <li
+            v-for="(item, i) in menuList"
+            :class="select_index == i ? 'active' : ''"
+            @click="menuTabClick(i)"
+            :key="i"
+          >
+            {{ item.label + (item.count > 0 ? "(" + item.count + ")" : "") }}
           </li>
-          <div class="popover-demo-content">
-            <ul>
-              <li v-for="(option, index) in zone_options" :key="index" @click="handleZoneChange(index)"
-                  :class="zone_selected == index ? 'tick' : ''">{{ option.text }}
-              </li>
-            </ul>
-          </div>
-        </el-popover>
 
-        <el-popover
-          v-model="time_options_visible"
-          placement="bottom"
-          trigger="click">
-          <li slot="reference">
-            {{ time_options[time_selected].text }}<span class="iconfont">&#xe74a;</span>
-          </li>
-          <div class="popover-demo-content">
-            <ul>
-              <li v-for="(option, index) in time_options" :key="index" @click="handleTimeChange(index)"
-                  :class="time_selected == index ? 'tick' : ''">{{ option.text }}
-              </li>
-            </ul>
-          </div>
-        </el-popover>
-
-      </ul>
-    </div>
-    <div class="stateBox ">
-      <!-- <patient-box class="clearfix" :patients="filtedScheduals "></patient-box> -->
-      <div v-for="(item, index) in filtedScheduals" :key="index">
-        <h2 class="title">{{item.zone_name}}</h2>
-        <patient-box class="clearfix" :patients="item.scheduals"></patient-box>
+          <el-popover
+            v-model="zone_options_visible"
+            placement="bottom"
+            trigger="click"
+          >
+            <li slot="reference">
+              {{ zone_options[zone_selected].text
+              }}<span class="iconfont">&#xe74a;</span>
+            </li>
+            <div class="popover-demo-content">
+              <ul>
+                <li
+                  v-for="(option, index) in zone_options"
+                  :key="index"
+                  @click="handleZoneChange(index)"
+                  :class="zone_selected == index ? 'tick' : ''"
+                >
+                  {{ option.text }}
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+
+          <el-popover
+            v-model="time_options_visible"
+            placement="bottom"
+            trigger="click"
+          >
+            <li slot="reference">
+              {{ time_options[time_selected].text
+              }}<span class="iconfont">&#xe74a;</span>
+            </li>
+            <div class="popover-demo-content">
+              <ul>
+                <li
+                  v-for="(option, index) in time_options"
+                  :key="index"
+                  @click="handleTimeChange(index)"
+                  :class="time_selected == index ? 'tick' : ''"
+                >
+                  {{ option.text }}
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+        </ul>
       </div>
-      <div class="NoData" v-if="filtedScheduals.length == 0&&networkStates"><img style="margin-top: 50px; margin-bottom: 50px"
-                                                                    src="@/assets/login/data.jpg" alt=""></div>
-
-      <div class="NoData" v-if="!networkStates" style="display: block;text-align: center;">
-        <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
-        <p  style="margin-top: 100px;font-size: 18px">网络异常，请点击重新加载</p>
-        <van-button  slot="button" size="normal" type="info" style="display:block;margin:0 auto"  @click="reloads()">重新加载
-        </van-button>
+      <div class="stateBox ">
+        <!-- <patient-box class="clearfix" :patients="filtedScheduals "></patient-box> -->
+        <div v-for="(item, index) in filtedScheduals" :key="index">
+          <h2 class="title">{{ item.zone_name }}</h2>
+          <patient-box
+            class="clearfix"
+            :patients="item.scheduals"
+          ></patient-box>
+        </div>
+        <div class="NoData" v-if="filtedScheduals.length == 0 && networkStates">
+          <img
+            style="margin-top: 50px; margin-bottom: 50px"
+            src="@/assets/login/data.jpg"
+            alt=""
+          />
+        </div>
+
+        <div
+          class="NoData"
+          v-if="!networkStates"
+          style="display: block;text-align: center;"
+        >
+          <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
+          <p style="margin-top: 100px;font-size: 18px">
+            网络异常，请点击重新加载
+          </p>
+          <van-button
+            slot="button"
+            size="normal"
+            type="info"
+            style="display:block;margin:0 auto"
+            @click="reloads()"
+            >重新加载
+          </van-button>
+        </div>
       </div>
-
     </div>
   </div>
-  </div>
-
 </template>
 
 <script>
-  import PatientBox from './PatientBox'
-  import {getWaitingScheduals} from '@/api/dialysis'
-  import {parseTime} from '@/utils'
-  import {Popover} from 'vux'
-  import {Toast} from 'vant'
-
-  import {
-    getSelectedAreaDataConfigList,
-    getSelectedTimesDataConfigList,
-    setSelectedAreaDataConfigList,
-    setSelectedTimesDataConfigList,
-    setWaitTypeSelectedConfig,
-    getWaitTypeSelectedConfig,
-  } from '@/utils/data_config'
-
-  export default {
-    name: 'WaitingArea',
-    components: {
-      PatientBox,
-      Popover
-    },
-    inject: ['reload'],
-    data () {
-      return {
-        loading:false,
-        menuList: [
-          {value: '1', label: '全部', count: 0},
-          {value: '3', label: '待开处方', count: 0},
-          {value: '2', label: '透前称量', count: 0}
-        ],
-
-        select_index: 0,
-        zone_selected: 0,
-        time_selected: 0,
-        networkStates:true,
-        scheduals: [],
-
-        zone_options: [{value: 0, text: '全部分区'}],
-        zone_scheduals: [],
-
-        time_options: [{value: 0, text: '全部班'}, {value: 1, text: '上午'}, {value: 2, text: '下午'}, {value: 3, text: '晚上'}],
-
-        zone_options_visible: false,
-        time_options_visible: false,
-
-      }
-
-    },
-    props: {
-      search_keyword: {
-        type: String
+import PatientBox from "./PatientBox";
+import { getWaitingScheduals } from "@/api/dialysis";
+import { parseTime } from "@/utils";
+import { Popover } from "vux";
+import { Toast } from "vant";
+
+import {
+  getSelectedAreaDataConfigList,
+  getSelectedTimesDataConfigList,
+  setSelectedAreaDataConfigList,
+  setSelectedTimesDataConfigList,
+  setWaitTypeSelectedConfig,
+  getWaitTypeSelectedConfig
+} from "@/utils/data_config";
+
+export default {
+  name: "WaitingArea",
+  components: {
+    PatientBox,
+    Popover
+  },
+  inject: ["reload"],
+  data() {
+    return {
+      loading: false,
+      menuList: [
+        { value: "1", label: "全部", count: 0 },
+        { value: "3", label: "待开处方", count: 0 },
+        { value: "2", label: "透前称量", count: 0 }
+      ],
+
+      select_index: 0,
+      zone_selected: 0,
+      time_selected: 0,
+      networkStates: true,
+      scheduals: [],
+
+      zone_options: [{ value: 0, text: "全部分区" }],
+      zone_scheduals: [],
+
+      time_options: [
+        { value: 0, text: "全部班" },
+        { value: 1, text: "上午" },
+        { value: 2, text: "下午" },
+        { value: 3, text: "晚上" }
+      ],
+
+      zone_options_visible: false,
+      time_options_visible: false
+    };
+  },
+  props: {
+    search_keyword: {
+      type: String
+    }
+  },
+  computed: {
+    filtedScheduals: function() {
+      var search_keyword = this.search_keyword;
+      if (this.search_keyword.length > 0) {
+        var scheduals = [];
+        for (let index = 0; index < this.scheduals.length; index++) {
+          const schedual = this.scheduals[index];
+          if (
+            schedual.patient.name.indexOf(search_keyword) != -1 ||
+            schedual.patient.dialysis_no.indexOf(search_keyword) != -1
+          ) {
+            scheduals.push(schedual);
+          }
+        }
+        return this.processScheduals(scheduals);
       }
-    },
-    computed: {
-      filtedScheduals: function () {
-        var search_keyword = this.search_keyword
-        if (this.search_keyword.length > 0) {
-          var scheduals = []
-          for (let index = 0; index < this.scheduals.length; index++) {
-            const schedual = this.scheduals[index]
+      //
+      // if (this.zone_selected != 0) {
+      //   var zone_name = this.zone_options[this.zone_selected].text
+      //   for (let index = 0; index < this.zone_scheduals.length; index++) {
+      //     const zone_scheduals = this.zone_scheduals[index]
+      //     if (zone_scheduals.zone_name == zone_name) {
+      //       return [zone_scheduals]
+      //     }
+      //   }
+      // }
+
+      // if (this.time_selected != 0) {
+      //   var zone_name = this.zone_options[this.zone_selected].text
+      //   console.log(zone_name)
+      //   var schedules = [];
+      //   for (let o_i = 0; o_i < this.zone_scheduals.length; o_i++) {
+      //     const scheduleInfo = this.zone_scheduals[o_i];
+      //     var originSchedules = scheduleInfo.scheduals;
+      //     var filtedSchedules = [];
+      //     for (let s_i = 0; s_i < originSchedules.length; s_i++) {
+      //       const schedule = originSchedules[s_i];
+      //       if(this.zone_selected == 0){
+      //         if (this.time_selected == 0 || schedule.schedule_type == this.time_selected) {
+      //           filtedSchedules.push(schedule);
+      //         }
+      //
+      //       }else{
+      //         console.log(zone_name)
+      //         console.log(schedule.device_number.zone.name)
+      //
+      //         if ((zone_name.length > 0 && zone_name == schedule.device_number.zone.name)) {
+      //           if (this.time_selected == 0 || schedule.schedule_type == this.time_selected) {
+      //             filtedSchedules.push(schedule);
+      //           }
+      //         }
+      //       }
+      //     }
+      //     if (filtedSchedules.length > 0) {
+      //       schedules.push({
+      //         zone_name: scheduleInfo.zone_name,
+      //         scheduals: filtedSchedules
+      //       });
+      //     }
+      //   }
+      //   return schedules
+      // }
+
+      var zone_selected = this.zone_selected;
+      var timetype_selected = this.time_selected;
+      if (zone_selected != 0 || timetype_selected != 0) {
+        var zone_name =
+          zone_selected == 0 ? "" : this.zone_options[zone_selected].text;
+        var schedules = [];
+        for (let o_i = 0; o_i < this.zone_scheduals.length; o_i++) {
+          const scheduleInfo = this.zone_scheduals[o_i];
+          var originSchedules = scheduleInfo.scheduals;
+          var filtedSchedules = [];
+          for (let s_i = 0; s_i < originSchedules.length; s_i++) {
+            const schedule = originSchedules[s_i];
             if (
-              schedual.patient.name.indexOf(search_keyword) != -1 ||
-              schedual.patient.dialysis_no.indexOf(search_keyword) != -1
+              zone_name.length == 0 ||
+              (zone_name.length > 0 &&
+                zone_name == schedule.device_number.zone.name)
             ) {
-              scheduals.push(schedual)
-            }
-          }
-          return this.processScheduals(scheduals)
-        }
-        //
-        // if (this.zone_selected != 0) {
-        //   var zone_name = this.zone_options[this.zone_selected].text
-        //   for (let index = 0; index < this.zone_scheduals.length; index++) {
-        //     const zone_scheduals = this.zone_scheduals[index]
-        //     if (zone_scheduals.zone_name == zone_name) {
-        //       return [zone_scheduals]
-        //     }
-        //   }
-        // }
-
-        // if (this.time_selected != 0) {
-        //   var zone_name = this.zone_options[this.zone_selected].text
-        //   console.log(zone_name)
-        //   var schedules = [];
-        //   for (let o_i = 0; o_i < this.zone_scheduals.length; o_i++) {
-        //     const scheduleInfo = this.zone_scheduals[o_i];
-        //     var originSchedules = scheduleInfo.scheduals;
-        //     var filtedSchedules = [];
-        //     for (let s_i = 0; s_i < originSchedules.length; s_i++) {
-        //       const schedule = originSchedules[s_i];
-        //       if(this.zone_selected == 0){
-        //         if (this.time_selected == 0 || schedule.schedule_type == this.time_selected) {
-        //           filtedSchedules.push(schedule);
-        //         }
-        //
-        //       }else{
-        //         console.log(zone_name)
-        //         console.log(schedule.device_number.zone.name)
-        //
-        //         if ((zone_name.length > 0 && zone_name == schedule.device_number.zone.name)) {
-        //           if (this.time_selected == 0 || schedule.schedule_type == this.time_selected) {
-        //             filtedSchedules.push(schedule);
-        //           }
-        //         }
-        //       }
-        //     }
-        //     if (filtedSchedules.length > 0) {
-        //       schedules.push({
-        //         zone_name: scheduleInfo.zone_name,
-        //         scheduals: filtedSchedules
-        //       });
-        //     }
-        //   }
-        //   return schedules
-        // }
-
-        var zone_selected = this.zone_selected
-        var timetype_selected = this.time_selected
-        if ((zone_selected != 0 || timetype_selected != 0)) {
-          var zone_name = zone_selected == 0 ? '' : this.zone_options[zone_selected].text
-          var schedules = []
-          for (let o_i = 0; o_i < this.zone_scheduals.length; o_i++) {
-            const scheduleInfo = this.zone_scheduals[o_i]
-            var originSchedules = scheduleInfo.scheduals
-            var filtedSchedules = []
-            for (let s_i = 0; s_i < originSchedules.length; s_i++) {
-              const schedule = originSchedules[s_i]
               if (
-                zone_name.length == 0 ||
-                (zone_name.length > 0 &&
-                  zone_name == schedule.device_number.zone.name)
+                timetype_selected == 0 ||
+                schedule.schedule_type == timetype_selected
               ) {
-                if (
-                  timetype_selected == 0 ||
-                  schedule.schedule_type == timetype_selected
-                ) {
-                  filtedSchedules.push(schedule)
-                }
+                filtedSchedules.push(schedule);
               }
             }
-            if (filtedSchedules.length > 0) {
-              schedules.push({
-                zone_name: scheduleInfo.zone_name,
-                scheduals: filtedSchedules
-              })
-            }
           }
-          return schedules
+          if (filtedSchedules.length > 0) {
+            schedules.push({
+              zone_name: scheduleInfo.zone_name,
+              scheduals: filtedSchedules
+            });
+          }
         }
+        return schedules;
+      }
 
-        if (this.select_index == 2) {
-          var scheduals = []
-          for (let index = 0; index < this.scheduals.length; index++) {
-            const schedual = this.scheduals[index]
-            if (schedual.assessment_before_dislysis == null) {
-              scheduals.push(schedual)
-            }
+      if (this.select_index == 2) {
+        var scheduals = [];
+        for (let index = 0; index < this.scheduals.length; index++) {
+          const schedual = this.scheduals[index];
+          if (schedual.assessment_before_dislysis == null) {
+            scheduals.push(schedual);
           }
-          return this.processScheduals(scheduals)
-          // return scheduals;
-        } else if (this.select_index == 1) {
-          var scheduals = []
-          for (let index = 0; index < this.scheduals.length; index++) {
-            const schedual = this.scheduals[index]
-            if (
-              schedual.assessment_before_dislysis == null &&
-              schedual.prescription == null
-            ) {
-              scheduals.push(schedual)
-            }
+        }
+        return this.processScheduals(scheduals);
+        // return scheduals;
+      } else if (this.select_index == 1) {
+        var scheduals = [];
+        for (let index = 0; index < this.scheduals.length; index++) {
+          const schedual = this.scheduals[index];
+          if (
+            schedual.assessment_before_dislysis == null &&
+            schedual.prescription == null
+          ) {
+            scheduals.push(schedual);
           }
-          // return scheduals;
-          return this.processScheduals(scheduals)
-        } else {
-          return this.zone_scheduals
-
         }
-
-      }
-    },
-    created () {
-      var area = getSelectedAreaDataConfigList()
-      var time = getSelectedTimesDataConfigList()
-      var type = getWaitTypeSelectedConfig()
-
-
-      if (area != null){
-        this.zone_options_visible = false
-        this.zone_selected = parseInt(area)
-        this.select_index = -1
+        // return scheduals;
+        return this.processScheduals(scheduals);
+      } else {
+        return this.zone_scheduals;
       }
+    }
+  },
+  created() {
+    var area = getSelectedAreaDataConfigList();
+    var time = getSelectedTimesDataConfigList();
+    var type = getWaitTypeSelectedConfig();
+
+    if (area != null) {
+      this.zone_options_visible = false;
+      this.zone_selected = parseInt(area);
+      this.select_index = -1;
+    }
 
-      if(time != null){
-        this.time_selected = parseInt(time)
-        this.select_index = -1
-        this.time_options_visible = false
-      }
-      if(type != null){
-        this.select_index = parseInt(type)
-      }
-      this.requestScheduals()
+    if (time != null) {
+      this.time_selected = parseInt(time);
+      this.select_index = -1;
+      this.time_options_visible = false;
+    }
+    if (type != null) {
+      this.select_index = parseInt(type);
+    }
+    this.requestScheduals();
+  },
+  mounted() {
+    this.timer = window.setInterval(() => {
+      setTimeout(this.requestScheduals(), 0);
+    }, 30000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = null;
+    // this.$once('hook:beforeDestroy', () => {
+    //   clearInterval(this.timer);
+    // })
+  },
+  methods: {
+    reloads: function() {
+      this.reload();
     },
-    mounted () {
-      this.timer = window.setInterval(() => {
-        setTimeout(this.requestScheduals(), 0)
-      }, 30000)
+    handleAllChange: function(tabIndex) {
+      this.select_index = tabIndex;
+      this.zone_selected = 0;
+      this.time_selected = 0;
     },
-    beforeDestroy () {
-      clearInterval(this.timer)
-      this.timer = null
-      // this.$once('hook:beforeDestroy', () => {
-      //   clearInterval(this.timer);
-      // })
+    menuTabClick: function(tabIndex) {
+      this.select_index = tabIndex;
+      this.zone_selected = 0;
+      this.time_selected = 0;
+      setSelectedAreaDataConfigList(this.zone_selected);
+      setSelectedTimesDataConfigList(this.time_selected);
+      setWaitTypeSelectedConfig(tabIndex);
+    },
+    handleZoneChange: function(index) {
+      this.zone_options_visible = false;
+      this.zone_selected = index;
+      this.select_index = -1;
+      setSelectedAreaDataConfigList(index.toString());
+    },
+    handleTimeChange: function(index) {
+      this.time_selected = index;
+      this.select_index = -1;
+      this.time_options_visible = false;
+      setSelectedTimesDataConfigList(index.toString());
     },
-    methods: {
-      reloads:function(){
-        this.reload()
-
-      },
-      handleAllChange: function (tabIndex) {
-        this.select_index = tabIndex
-        this.zone_selected = 0
-        this.time_selected = 0
-
-      },
-      menuTabClick: function (tabIndex) {
-        this.select_index = tabIndex
-        this.zone_selected = 0
-        this.time_selected = 0
-        setSelectedAreaDataConfigList(this.zone_selected)
-        setSelectedTimesDataConfigList(this.time_selected)
-        setWaitTypeSelectedConfig(tabIndex)
-      },
-      handleZoneChange: function (index) {
-        this.zone_options_visible = false
-        this.zone_selected = index
-        this.select_index = -1
-        setSelectedAreaDataConfigList(index.toString())
-      }, handleTimeChange: function (index) {
-        this.time_selected = index
-        this.select_index = -1
-        this.time_options_visible = false
-        setSelectedTimesDataConfigList(index.toString())
-      },
 
-      requestScheduals () {
-        this.loading = true
-        var date = parseTime(Date.parse(new Date()), '{y}-{m}-{d}')
-        getWaitingScheduals({date: date}).then(rs => {
-          var resp = rs.data
+    requestScheduals() {
+      this.loading = true;
+      var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}");
+      getWaitingScheduals({ date: date })
+        .then(rs => {
+          var resp = rs.data;
           if (resp.state == 1) {
-            this.loading = false
+            this.loading = false;
 
-            var scheduals = resp.data.scheduals
-            var totalCount = scheduals.length
-            var prescription_count = 0
-            var assessment_before_dislysis_count = 0
+            var scheduals = resp.data.scheduals;
+            var totalCount = scheduals.length;
+            var prescription_count = 0;
+            var assessment_before_dislysis_count = 0;
             for (let index = 0; index < scheduals.length; index++) {
-              const schedual = scheduals[index]
+              const schedual = scheduals[index];
               if (schedual.assessment_before_dislysis == null) {
-                assessment_before_dislysis_count += 1
+                assessment_before_dislysis_count += 1;
               }
               if (schedual.prescription == null) {
-                prescription_count += 1
+                prescription_count += 1;
               }
             }
-            this.menuList[2].count = assessment_before_dislysis_count
-            this.menuList[1].count = prescription_count
-            this.scheduals = scheduals
+            this.menuList[2].count = assessment_before_dislysis_count;
+            this.menuList[1].count = prescription_count;
+            this.scheduals = scheduals;
 
-            this.zone_options = this.makeZones(scheduals)
-            this.zone_scheduals = this.processScheduals(scheduals)
+            this.zone_options = this.makeZones(scheduals);
+            this.zone_scheduals = this.processScheduals(scheduals);
           } else {
-            this.loading = false
+            this.loading = false;
 
             this.$toast({
               message: resp.msg
-            })
+            });
           }
-        }).catch(error => {
-          this.loading = false
+        })
+        .catch(error => {
+          this.loading = false;
 
           //超时之后在这里捕抓错误信息.
           if (error.response) {
-            this.networkStates = false
-
+            this.networkStates = false;
           } else if (error.request) {
-            this.networkStates = false
+            this.networkStates = false;
             // if(error.request.readyState == 4 && error.request.status == 0){
             //   //我在这里重新请求
             //   this.networkStates = false
             // }
           } else {
-            this.networkStates = false
+            this.networkStates = false;
           }
         });
-      },
-      makeZones: function (scheduals) {
-        var zoneMap = {}
-        for (let index = 0; index < scheduals.length; index++) {
-          const schedual = scheduals[index]
-          if (zoneMap[schedual.device_number.zone.id] == null) {
-            zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone
-          }
+    },
+    makeZones: function(scheduals) {
+      var zoneMap = {};
+      for (let index = 0; index < scheduals.length; index++) {
+        const schedual = scheduals[index];
+        if (zoneMap[schedual.device_number.zone.id] == null) {
+          zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone;
         }
+      }
 
-        var zones = []
-        zones.push({value: 0, text: '全部分区'})
+      var zones = [];
+      zones.push({ value: 0, text: "全部分区" });
 
-        for (var zoneId in zoneMap) {
-          zones.push({value: zoneMap[zoneId].id, text: zoneMap[zoneId].name})
-        }
+      for (var zoneId in zoneMap) {
+        zones.push({ value: zoneMap[zoneId].id, text: zoneMap[zoneId].name });
+      }
 
-        // zones = zones.sort(function (a, b) {
-        //   return a.value > b.value
-        // })
-        return zones
-      },
-      processScheduals: function (scheduals) {
-        var zoneMap = {}
-        var schedualMap = {}
-        for (let index = 0; index < scheduals.length; index++) {
-          const schedual = scheduals[index]
-          if (schedualMap[schedual.device_number.zone.id] == null) {
-            schedualMap[schedual.device_number.zone.id] = []
-          }
-          schedualMap[schedual.device_number.zone.id].push(schedual)
-          if (zoneMap[schedual.device_number.zone.id] == null) {
-            zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone
-          }
+      // zones = zones.sort(function (a, b) {
+      //   return a.value > b.value
+      // })
+      return zones;
+    },
+    processScheduals: function(scheduals) {
+      var zoneMap = {};
+      var schedualMap = {};
+      for (let index = 0; index < scheduals.length; index++) {
+        const schedual = scheduals[index];
+        if (schedualMap[schedual.device_number.zone.id] == null) {
+          schedualMap[schedual.device_number.zone.id] = [];
         }
-
-        var zones = []
-        // zones.push({ value: 0, text: "全部分区" })
-        for (var zoneId in zoneMap) {
-          zones.push({id: zoneMap[zoneId].id, name: zoneMap[zoneId].name})
+        schedualMap[schedual.device_number.zone.id].push(schedual);
+        if (zoneMap[schedual.device_number.zone.id] == null) {
+          zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone;
         }
+      }
 
-        zones = zones.sort(function (a, b) {
-          return a.id > b.id
-        })
-        // this.zones = zones
+      var zones = [];
+      // zones.push({ value: 0, text: "全部分区" })
+      for (var zoneId in zoneMap) {
+        zones.push({ id: zoneMap[zoneId].id, name: zoneMap[zoneId].name });
+      }
 
-        var zone_scheduals = []
-        for (let index = 0; index < zones.length; index++) {
-          const zone = zones[index]
-          var scheduals = schedualMap[zone.id]
-          zone_scheduals.push({
-            zone_id: zone.id,
-            zone_name: zone.name,
+      zones = zones.sort(function(a, b) {
+        return a.id > b.id;
+      });
+      // this.zones = zones
 
-            scheduals: scheduals
-          })
-        }
-        // this.zone_scheduals = zone_scheduals;
-        return zone_scheduals
+      var zone_scheduals = [];
+      for (let index = 0; index < zones.length; index++) {
+        const zone = zones[index];
+        var scheduals = schedualMap[zone.id];
+        zone_scheduals.push({
+          zone_id: zone.id,
+          zone_name: zone.name,
+
+          scheduals: scheduals
+        });
       }
+      // this.zone_scheduals = zone_scheduals;
+      return zone_scheduals;
     }
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .screening {
+.screening {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
   top: 63px;
@@ -437,58 +472,60 @@
   z-index: 66;
   left: 1.58rem;
   background: #fff;
-  ul {
-  @include display-flex;
-  @include align-items-center;
-  @include text-align;
-  @include justify-content-between;
-  width: 60%;
-  margin: 0 auto;
-  font-size: 0.32rem;
-  color:$title-color;
-  li {
-  padding: 0.3rem 0;
-  .iconfont {
-  font-size: 0.32rem;
-  margin-left: 0.1rem;
-  }
-  }
-  .active {
-  position: relative;
-  &::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: $main-color;
-  // border-bottom: 0.04rem $main-color solid;
-  content: "";
-  }
-  }
+  @media only screen and (max-width: 812px) {
+    top: 50px !important;
   }
+  ul {
+    @include display-flex;
+    @include align-items-center;
+    @include text-align;
+    @include justify-content-between;
+    width: 60%;
+    margin: 0 auto;
+    font-size: 0.32rem;
+    color: $title-color;
+    li {
+      padding: 0.3rem 0;
+      .iconfont {
+        font-size: 0.32rem;
+        margin-left: 0.1rem;
+      }
+    }
+    .active {
+      position: relative;
+      &::before {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: $main-color;
+        // border-bottom: 0.04rem $main-color solid;
+        content: "";
+      }
+    }
   }
-  .stateBox {
+}
+.stateBox {
   // padding: 0.5rem 0 0 0.6rem;
   .title {
-  font-size: 0.34rem;
-  color: #34495e;
-  font-weight: 600;
-  height: 1rem;
-  line-height: 1rem;
-  display: inline-block;
-  }
-  }
-  .shadow{
-  width:100%;
-  height:100%;
-  position:absolute;
-  left:0;
-  top:0;
-  z-index:998;
-  background-color:#000;
-  opacity:0.6;
-  display:none;
+    font-size: 0.34rem;
+    color: #34495e;
+    font-weight: 600;
+    height: 1rem;
+    line-height: 1rem;
+    display: inline-block;
   }
+}
+.shadow {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 998;
+  background-color: #000;
+  opacity: 0.6;
+  display: none;
+}
 </style>
-

src/pages/main/add_urgent_schedule.vue

@@ -4,7 +4,9 @@
     <div class="mainContent">
       <div class="navigation">
         <div class="goBack">
-          <span class="back" @click="$router.back(-1)"><span class="iconfont">&#xe720;</span>返回</span>
+          <span class="back" @click="$router.back(-1)"
+            ><span class="iconfont">&#xe720;</span>返回</span
+          >
         </div>
         <div class="nav">
           <span>临时排班</span>
@@ -25,23 +27,23 @@
             <div class="field_panel">
               <van-field v-model="date" class="field"></van-field>
             </div>
-
           </van-col>
-
-
         </van-row>
         <van-row class="row">
-
           <van-col :span="9">
             <span class="title">患者：</span>
             <div class="field_panel">
-              <van-field ref="patient_field" @focus="selectPatientAction" :value="patient_name" class="field"
-                         left-icon="arrow-down"></van-field>
+              <van-field
+                ref="patient_field"
+                @focus="selectPatientAction"
+                :value="patient_name"
+                class="field"
+                left-icon="arrow-down"
+              ></van-field>
             </div>
           </van-col>
 
           <van-col :span="9">
-
             <div class="field_panel">
               <el-autocomplete
                 style="float: right"
@@ -59,29 +61,43 @@
               </el-autocomplete>
             </div>
           </van-col>
-
         </van-row>
         <van-row class="row">
           <van-col :span="9">
             <span class="title">班次：</span>
             <div class="field_panel">
-              <van-field ref="sch_type_field" @focus="selectSchTypeAction" :value="schedule_type_title" class="field"
-                         left-icon="arrow-down"></van-field>
+              <van-field
+                ref="sch_type_field"
+                @focus="selectSchTypeAction"
+                :value="schedule_type_title"
+                class="field"
+                left-icon="arrow-down"
+              ></van-field>
             </div>
           </van-col>
 
           <van-col :span="9">
             <span class="title">治疗模式：</span>
             <div class="field_panel">
-              <van-field ref="mode_field" @focus="selectModeAction" :value="mode_name" class="field"
-                         left-icon="arrow-down"></van-field>
+              <van-field
+                ref="mode_field"
+                @focus="selectModeAction"
+                :value="mode_name"
+                class="field"
+                left-icon="arrow-down"
+              ></van-field>
             </div>
           </van-col>
           <van-col :span="9">
             <span class="title">床位：</span>
             <div class="field_panel">
-              <van-field ref="bed_field" @focus="selectBedAction" :value="bed_name" class="field"
-                         left-icon="arrow-down"></van-field>
+              <van-field
+                ref="bed_field"
+                @focus="selectBedAction"
+                :value="bed_name"
+                class="field"
+                left-icon="arrow-down"
+              ></van-field>
             </div>
           </van-col>
         </van-row>
@@ -89,7 +105,9 @@
           <van-col :span="24">
             <span class="title">&nbsp;</span>
             <div class="field_panel">
-              <van-button type="info" size="normal" @click="submitAction">立即排班</van-button>
+              <van-button type="info" size="normal" @click="submitAction"
+                >立即排班</van-button
+              >
             </div>
           </van-col>
         </van-row>
@@ -97,252 +115,286 @@
     </div>
 
     <van-popup v-model="show_patient_picker" position="bottom" class="popup">
-      <van-picker :columns="patients" value-key="name" @change="didChangePatient"></van-picker>
+      <van-picker
+        :columns="patients"
+        value-key="name"
+        @change="didChangePatient"
+      ></van-picker>
     </van-popup>
     <van-popup v-model="show_mode_picker" position="bottom" class="popup">
-      <van-picker :columns="modes" value-key="name" @change="didChangeMode"></van-picker>
+      <van-picker
+        :columns="modes"
+        value-key="name"
+        @change="didChangeMode"
+      ></van-picker>
     </van-popup>
     <van-popup v-model="show_bed_picker" position="bottom" class="popup">
-      <van-picker :columns="zone_device_options" value-key="number" @change="didChangeBed"></van-picker>
+      <van-picker
+        :columns="zone_device_options"
+        value-key="number"
+        @change="didChangeBed"
+      ></van-picker>
     </van-popup>
     <van-popup v-model="show_sch_type_picker" position="bottom" class="popup">
-      <van-picker :columns="schedule_types" value-key="text" @change="didChangeSchType"></van-picker>
+      <van-picker
+        :columns="schedule_types"
+        value-key="text"
+        @change="didChangeSchType"
+      ></van-picker>
     </van-popup>
   </div>
 </template>
 
 <script>
-  import SideBar from '@/pages/layout/SideBar'
-  import {parseTime} from '@/utils'
-  import {getUrgentScheduleInitData, PostSearch, postUrgentSchedule} from '@/api/dialysis'
-  import {Dialog, Toast} from 'vant'
-
-  export default {
-    name: 'AddUrgentSchedule',
-    components: {
-      SideBar,
-    },
-    data () {
-      return {
-        loading: false,
-        value: '',
-        date: '2019-09-09',
-        patient_id: 0,
-        mode_id: 0,
-        device_id: 0,
-        schedule_type: 1,
-        zone_name: '',
-
-        show_patient_picker: false,
-        show_mode_picker: false,
-        show_bed_picker: false,
-        show_sch_type_picker: false,
-
-        patients: [],
-        modes: [],
-        schedule_types: [
-          {value: 1, text: '上午'},
-          {value: 2, text: '下午'},
-          {value: 3, text: '晚上'},
-        ],
-
-        origin_device_numbers: [],
-        zone_device_map: {},
-        zone_names: [],
-        current_devices: [],
-        zone_device_options: [],
-
-        origin_schedules: [],
+import SideBar from "@/pages/layout/SideBar";
+import { parseTime } from "@/utils";
+import {
+  getUrgentScheduleInitData,
+  PostSearch,
+  postUrgentSchedule
+} from "@/api/dialysis";
+import { Dialog, Toast } from "vant";
+
+export default {
+  name: "AddUrgentSchedule",
+  components: {
+    SideBar
+  },
+  data() {
+    return {
+      loading: false,
+      value: "",
+      date: "2019-09-09",
+      patient_id: 0,
+      mode_id: 0,
+      device_id: 0,
+      schedule_type: 1,
+      zone_name: "",
+
+      show_patient_picker: false,
+      show_mode_picker: false,
+      show_bed_picker: false,
+      show_sch_type_picker: false,
+
+      patients: [],
+      modes: [],
+      schedule_types: [
+        { value: 1, text: "上午" },
+        { value: 2, text: "下午" },
+        { value: 3, text: "晚上" }
+      ],
+
+      origin_device_numbers: [],
+      zone_device_map: {},
+      zone_names: [],
+      current_devices: [],
+      zone_device_options: [],
+
+      origin_schedules: []
+    };
+  },
+  computed: {
+    patient_name: function() {
+      for (let index = 0; index < this.patients.length; index++) {
+        const patient = this.patients[index];
+        if (patient.id == this.patient_id) {
+          return patient.name;
+        }
       }
+      return "";
     },
-    computed: {
-      patient_name: function () {
-        for (let index = 0; index < this.patients.length; index++) {
-          const patient = this.patients[index]
-          if (patient.id == this.patient_id) {
-            return patient.name
-          }
-        }
-        return ''
-      },
-      mode_name: function () {
-        for (let index = 0; index < this.modes.length; index++) {
-          const mode = this.modes[index]
-          if (mode.id == this.mode_id) {
-            return mode.name
-          }
-        }
-        return ''
-      },
-      bed_name: function () {
-        if (this.zone_name.length > 0 && this.device_id != 0) {
-          for (let index = 0; index < this.current_devices.length; index++) {
-            const device_number = this.current_devices[index]
-            if (device_number.id == this.device_id) {
-              return device_number.zone.name + ' - ' + device_number.number
-            }
-          }
+    mode_name: function() {
+      for (let index = 0; index < this.modes.length; index++) {
+        const mode = this.modes[index];
+        if (mode.id == this.mode_id) {
+          return mode.name;
         }
-        return ''
-      },
-      schedule_type_title: function () {
-        for (let index = 0; index < this.schedule_types.length; index++) {
-          const type = this.schedule_types[index]
-          if (type.value == this.schedule_type) {
-            return type.text
+      }
+      return "";
+    },
+    bed_name: function() {
+      if (this.zone_name.length > 0 && this.device_id != 0) {
+        for (let index = 0; index < this.current_devices.length; index++) {
+          const device_number = this.current_devices[index];
+          if (device_number.id == this.device_id) {
+            return device_number.zone.name + " - " + device_number.number;
           }
         }
-        return ''
-      },
+      }
+      return "";
     },
-    mounted () {
-      var today = new Date()
-      this.date = parseTime(today, '{y}-{m}-{d}')
-
-      var hour = today.getHours()
-      if (hour > 3 && hour < 11) {
-        this.schedule_type = 1
-      } else if (hour >= 11 && hour < 18) {
-        this.schedule_type = 2
-      } else {
-        this.schedule_type = 3
+    schedule_type_title: function() {
+      for (let index = 0; index < this.schedule_types.length; index++) {
+        const type = this.schedule_types[index];
+        if (type.value == this.schedule_type) {
+          return type.text;
+        }
       }
+      return "";
+    }
+  },
+  mounted() {
+    var today = new Date();
+    this.date = parseTime(today, "{y}-{m}-{d}");
+
+    var hour = today.getHours();
+    if (hour > 3 && hour < 11) {
+      this.schedule_type = 1;
+    } else if (hour >= 11 && hour < 18) {
+      this.schedule_type = 2;
+    } else {
+      this.schedule_type = 3;
+    }
 
-      this.loading = true
-      let params = {
-        type: this.schedule_type
-      }
-      console.log(params)
-      getUrgentScheduleInitData(params).then(rs => {
-        this.loading = false
+    this.loading = true;
+    let params = {
+      type: this.schedule_type
+    };
+    console.log(params);
+    getUrgentScheduleInitData(params)
+      .then(rs => {
+        this.loading = false;
         // console.log(rs.data.data)
         if (rs.data.state == 1) {
-          this.origin_schedules = rs.data.data.schedules
-          this.patients = rs.data.data.patients
-          this.modes = rs.data.data.modes
-          this.origin_device_numbers = rs.data.data.device_numbers
+          this.origin_schedules = rs.data.data.schedules;
+          this.patients = rs.data.data.patients;
+          this.modes = rs.data.data.modes;
+          this.origin_device_numbers = rs.data.data.device_numbers;
 
           for (let i = this.origin_schedules.length - 1; i >= 0; i--) {
             for (let y = this.origin_device_numbers.length - 1; y >= 0; y--) {
-              if (this.origin_device_numbers[y].id == this.origin_schedules[i].bed_id) {
-                this.origin_device_numbers.splice(y, 1)
+              if (
+                this.origin_device_numbers[y].id ==
+                this.origin_schedules[i].bed_id
+              ) {
+                this.origin_device_numbers.splice(y, 1);
               }
             }
           }
 
           if (this.patients.length > 0) {
-            this.patient_id = this.patients[0].id
+            this.patient_id = this.patients[0].id;
           }
           if (this.modes.length > 0) {
-            this.mode_id = this.modes[0].id
+            this.mode_id = this.modes[0].id;
           }
 
-          var zone_device_map = {}
-          for (let index = 0; index < this.origin_device_numbers.length; index++) {
-            const device_number = this.origin_device_numbers[index]
-            if (zone_device_map[device_number.zone.name] == null || zone_device_map[device_number.zone.name] == undefined) {
-              zone_device_map[device_number.zone.name] = []
+          var zone_device_map = {};
+          for (
+            let index = 0;
+            index < this.origin_device_numbers.length;
+            index++
+          ) {
+            const device_number = this.origin_device_numbers[index];
+            if (
+              zone_device_map[device_number.zone.name] == null ||
+              zone_device_map[device_number.zone.name] == undefined
+            ) {
+              zone_device_map[device_number.zone.name] = [];
             }
-            zone_device_map[device_number.zone.name].push(device_number)
+            zone_device_map[device_number.zone.name].push(device_number);
           }
-          this.zone_device_map = zone_device_map
+          this.zone_device_map = zone_device_map;
 
-          this.zone_names = Object.keys(this.zone_device_map)
+          this.zone_names = Object.keys(this.zone_device_map);
           if (this.zone_names.length > 0) {
-            this.zone_name = this.zone_names[0]
-            this.current_devices = this.zone_device_map[this.zone_name]
-            this.device_id = this.current_devices[0].id
+            this.zone_name = this.zone_names[0];
+            this.current_devices = this.zone_device_map[this.zone_name];
+            this.device_id = this.current_devices[0].id;
           }
           this.zone_device_options = [
-            {values: this.zone_names},
+            { values: this.zone_names },
             // { values: this.getDeviceNumberNames(this.current_devices) },
-            {values: this.current_devices},
-          ]
+            { values: this.current_devices }
+          ];
         } else {
-          Toast.fail(rs.data.msg)
+          Toast.fail(rs.data.msg);
         }
-
-      }).catch(err => {
-        this.loading = false
-        Toast.fail(err)
       })
+      .catch(err => {
+        this.loading = false;
+        Toast.fail(err);
+      });
+  },
+  methods: {
+    handleSelect(val) {
+      this.patient_name = val.name;
+      this.patient_id = val.id;
     },
-    methods: {
-      handleSelect (val) {
-        this.patient_name = val.name
-        this.patient_id = val.id
-      },
-      querySearchAsync (keyword, cb) {
-        let key = ''
-        if (keyword != undefined) {
-          key = keyword
+    querySearchAsync(keyword, cb) {
+      let key = "";
+      if (keyword != undefined) {
+        key = keyword;
+      }
+      let searchArray = [];
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient;
+          cb(searchArray);
+        } else {
+          cb([]);
         }
-        let searchArray = []
-        PostSearch(key).then(response => {
-          if (response.data.state == 1) {
-            searchArray = response.data.data.patient
-            cb(searchArray)
-          } else {
-            cb([])
-          }
-        })
-      },
-
-      selectPatientAction: function () {
-        this.$refs.patient_field.blur()
-        this.show_patient_picker = true
-      },
-      selectModeAction: function () {
-        this.$refs.mode_field.blur()
-        this.show_mode_picker = true
-      },
-      selectBedAction: function () {
-        this.$refs.bed_field.blur()
-        this.show_bed_picker = true
-      },
-      selectSchTypeAction: function () {
-        this.$refs.sch_type_field.blur()
-        this.show_sch_type_picker = true
-      },
-
-      didChangePatient: function (picker, patient, index) {
-        this.patient_id = patient.id
-      },
-      didChangeMode: function (picker, mode, index) {
-        this.mode_id = mode.id
-      },
-      didChangeBed: function (picker, values, col_index) {
-        if (col_index == 0) {
-          this.zone_name = values[0]
-          this.current_devices = this.zone_device_map[this.zone_name]
-          this.device_id = this.current_devices[0].id
+      });
+    },
 
-          picker.setColumnValues(1, this.current_devices)
+    selectPatientAction: function() {
+      this.$refs.patient_field.blur();
+      this.show_patient_picker = true;
+    },
+    selectModeAction: function() {
+      this.$refs.mode_field.blur();
+      this.show_mode_picker = true;
+    },
+    selectBedAction: function() {
+      this.$refs.bed_field.blur();
+      this.show_bed_picker = true;
+    },
+    selectSchTypeAction: function() {
+      this.$refs.sch_type_field.blur();
+      this.show_sch_type_picker = true;
+    },
 
-        } else if (col_index == 1) {
-          this.device_id = values[1].id
-        }
-      },
-      didChangeSchType: function (picker, sch_type, index) {
-        this.schedule_type = sch_type.value
+    didChangePatient: function(picker, patient, index) {
+      this.patient_id = patient.id;
+    },
+    didChangeMode: function(picker, mode, index) {
+      this.mode_id = mode.id;
+    },
+    didChangeBed: function(picker, values, col_index) {
+      if (col_index == 0) {
+        this.zone_name = values[0];
+        this.current_devices = this.zone_device_map[this.zone_name];
+        this.device_id = this.current_devices[0].id;
+
+        picker.setColumnValues(1, this.current_devices);
+      } else if (col_index == 1) {
+        this.device_id = values[1].id;
+      }
+    },
+    didChangeSchType: function(picker, sch_type, index) {
+      this.schedule_type = sch_type.value;
 
-        this.loading = true
-        let params = {
-          type: this.schedule_type
-        }
-        getUrgentScheduleInitData(params).then(rs => {
-          this.loading = false
+      this.loading = true;
+      let params = {
+        type: this.schedule_type
+      };
+      getUrgentScheduleInitData(params)
+        .then(rs => {
+          this.loading = false;
           // console.log(rs.data.data)
           if (rs.data.state == 1) {
-            this.origin_schedules = rs.data.data.schedules
-            this.patients = rs.data.data.patients
-            this.modes = rs.data.data.modes
-            this.origin_device_numbers = rs.data.data.device_numbers
+            this.origin_schedules = rs.data.data.schedules;
+            this.patients = rs.data.data.patients;
+            this.modes = rs.data.data.modes;
+            this.origin_device_numbers = rs.data.data.device_numbers;
 
             for (let i = this.origin_schedules.length - 1; i >= 0; i--) {
               for (let y = this.origin_device_numbers.length - 1; y >= 0; y--) {
-                if (this.origin_device_numbers[y].id == this.origin_schedules[i].bed_id) {
-                  this.origin_device_numbers.splice(y, 1)
+                if (
+                  this.origin_device_numbers[y].id ==
+                  this.origin_schedules[i].bed_id
+                ) {
+                  this.origin_device_numbers.splice(y, 1);
                 }
               }
             }
@@ -354,167 +406,191 @@
             //   this.mode_id = this.modes[0].id
             // }
 
-            var zone_device_map = {}
-            for (let index = 0; index < this.origin_device_numbers.length; index++) {
-              const device_number = this.origin_device_numbers[index]
-              if (zone_device_map[device_number.zone.name] == null || zone_device_map[device_number.zone.name] == undefined) {
-                zone_device_map[device_number.zone.name] = []
+            var zone_device_map = {};
+            for (
+              let index = 0;
+              index < this.origin_device_numbers.length;
+              index++
+            ) {
+              const device_number = this.origin_device_numbers[index];
+              if (
+                zone_device_map[device_number.zone.name] == null ||
+                zone_device_map[device_number.zone.name] == undefined
+              ) {
+                zone_device_map[device_number.zone.name] = [];
               }
-              zone_device_map[device_number.zone.name].push(device_number)
+              zone_device_map[device_number.zone.name].push(device_number);
             }
-            this.zone_device_map = zone_device_map
+            this.zone_device_map = zone_device_map;
 
-            this.zone_names = Object.keys(this.zone_device_map)
+            this.zone_names = Object.keys(this.zone_device_map);
             if (this.zone_names.length > 0) {
-              this.zone_name = this.zone_names[0]
-              this.current_devices = this.zone_device_map[this.zone_name]
-              this.device_id = this.current_devices[0].id
+              this.zone_name = this.zone_names[0];
+              this.current_devices = this.zone_device_map[this.zone_name];
+              this.device_id = this.current_devices[0].id;
             }
             this.zone_device_options = [
-              {values: this.zone_names},
+              { values: this.zone_names },
               // { values: this.getDeviceNumberNames(this.current_devices) },
-              {values: this.current_devices},
-            ]
+              { values: this.current_devices }
+            ];
           } else {
-            Toast.fail(rs.data.msg)
+            Toast.fail(rs.data.msg);
           }
-
-        }).catch(err => {
-          this.loading = false
-          Toast.fail(err)
         })
-      },
+        .catch(err => {
+          this.loading = false;
+          Toast.fail(err);
+        });
+    },
 
-      submitAction: function () {
-        if (this.patient_id == 0 || this.mode_id == 0 || this.device_id == 0) {
-          Toast.fail('请选择班次、床位等')
-          return
-        }
+    submitAction: function() {
+      if (this.patient_id == 0 || this.mode_id == 0 || this.device_id == 0) {
+        Toast.fail("请选择班次、床位等");
+        return;
+      }
 
-        var repeated = false
-        for (let index = 0; index < this.origin_schedules.length; index++) {
-          const schedule = this.origin_schedules[index]
-          if (schedule.bed_id == this.device_id && this.schedule_type == schedule.schedule_type) {
-            repeated = true
-            break
-          }
+      var repeated = false;
+      for (let index = 0; index < this.origin_schedules.length; index++) {
+        const schedule = this.origin_schedules[index];
+        if (
+          schedule.bed_id == this.device_id &&
+          this.schedule_type == schedule.schedule_type
+        ) {
+          repeated = true;
+          break;
         }
-        if (repeated) {
-          Dialog.confirm({
-            title: '提醒',
-            message: '你选择的床位已经被排班，确认要替换吗？'
-          }).then(() => {
+      }
+      if (repeated) {
+        Dialog.confirm({
+          title: "提醒",
+          message: "你选择的床位已经被排班，确认要替换吗？"
+        })
+          .then(() => {
             // on confirm
-            this.submit()
-          }).catch(() => {
-            // on cancel
+            this.submit();
           })
-        } else {
-          this.submit()
-        }
-      },
-      submit: function () {
-        var params = {
-          patient_id: this.patient_id,
-          mode: this.mode_id,
-          schedule_type: this.schedule_type,
-          bed: this.device_id,
-        }
-        this.loading = true
-        postUrgentSchedule(params).then(rs => {
-          this.loading = false
-          var resp = rs.data
+          .catch(() => {
+            // on cancel
+          });
+      } else {
+        this.submit();
+      }
+    },
+    submit: function() {
+      var params = {
+        patient_id: this.patient_id,
+        mode: this.mode_id,
+        schedule_type: this.schedule_type,
+        bed: this.device_id
+      };
+      this.loading = true;
+      postUrgentSchedule(params)
+        .then(rs => {
+          this.loading = false;
+          var resp = rs.data;
           if (resp.state == 1) {
-            console.log(resp.data)
-            var patient = resp.data.patient
-            var schedule = resp.data.schedule
+            console.log(resp.data);
+            var patient = resp.data.patient;
+            var schedule = resp.data.schedule;
             this.$router.push({
-              path: '/details',
-              query: {patient_id: patient.id, date: schedule.schedule_date, patient_name: patient.name}
-            })
-
+              path: "/details",
+              query: {
+                patient_id: patient.id,
+                date: schedule.schedule_date,
+                patient_name: patient.name
+              }
+            });
           } else {
-            Toast.fail(resp.msg)
+            Toast.fail(resp.msg);
           }
-
-        }).catch(err => {
-          this.loading = false
-          Toast.fail('err')
         })
-      }
+        .catch(err => {
+          this.loading = false;
+          Toast.fail("err");
+        });
     }
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .mainContent {
+.mainContent {
   position: relative;
   .navigation {
-  padding: 0.3rem 0.36rem;
-  border-bottom: 1px #e5e5e5 solid;
-  position: fixed;
-  top: 0;
-  left:1.58rem;
-  right: 0;
-  z-index: 100;
-  background: #fff;
-  .goBack {
-  float: left;
-  .back {
-  color: $main-color;
-  margin-right: 0.87rem;
-  .iconfont {
-  color: $main-color;
-  }
-  }
-  }
-  .nav {
-  text-align: center;
-  font-size: 0.36rem;
-  }
+    padding: 0.3rem 0.36rem;
+    border-bottom: 1px #e5e5e5 solid;
+    position: fixed;
+    top: 0;
+    left: 1.58rem;
+    right: 0;
+    z-index: 100;
+    background: #fff;
+    .goBack {
+      float: left;
+      .back {
+        color: $main-color;
+        margin-right: 0.87rem;
+        .iconfont {
+          color: $main-color;
+        }
+      }
+    }
+    .nav {
+      text-align: center;
+      font-size: 0.36rem;
+    }
   }
 
   .form {
-  background: #fff;
-  min-height: calc(100vh - 2px);
-  padding-top:55px;
-  padding-left: 20px;
-  .row {
-  padding: 5px 0;
-  .title {
-  color: #8f8f8f;
-  margin-right: 5px;
-  text-align: right;
-  font-size: 16px;
-  line-height: 45px;
-  width: 80px;
-  float: left;
-  }
-  .field_panel {
-  display: inline-block;
-  .field {
-  padding: 0 0;
-  font-size: 18px;
-  line-height: 45px;
-  width: 180px;
-  @media only screen and (max-width: 812px) {
-  width: 100px;
-  }
-  }
-  }
+    background: #fff;
+    min-height: calc(100vh - 2px);
+    padding-top: 55px;
+    padding-left: 20px;
+    .row {
+      padding: 5px 0;
+      .title {
+        color: #8f8f8f;
+        margin-right: 5px;
+        text-align: right;
+        font-size: 16px;
+        line-height: 45px;
+        width: 80px;
+        float: left;
+        @media only screen and (max-width: 812px) {
+          font-size: 0.3rem !important;
+        }
+      }
+      .el-input__inner {
+        @media only screen and (max-width: 812px) {
+          height: 24px !important;
+          line-height: 24px !important;
+        }
+      }
+      .field_panel {
+        display: inline-block;
+        .field {
+          padding: 0 0;
+          font-size: 18px;
+          line-height: 45px;
+          width: 180px;
+          @media only screen and (max-width: 812px) {
+            width: 100px;
+          }
+        }
+      }
 
-  .danger_hint {
-  font-size: 0.34rem;
-  line-height: 40px;
-  text-align: center;
-  color: red;
-  }
-  }
-  }
+      .danger_hint {
+        font-size: 0.34rem;
+        line-height: 40px;
+        text-align: center;
+        color: red;
+      }
+    }
   }
-  .popup {
+}
+.popup {
   border-radius: 0 !important;
   top: initial !important;
-  }
+}
 </style>
-

src/pages/main/dialog/LongDialog.vue

@@ -504,6 +504,9 @@ export default {
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
+   @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
     li {
       height: 1rem;
@@ -534,6 +537,7 @@ export default {
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
+  
   ul {
     li {
       line-height: 1rem;

src/pages/main/dialog/TwoMenu.vue

@@ -1,21 +1,36 @@
 <template>
   <div class="Dialog" v-show="show">
     <div class="DialogTit">
-      <div class="back" @click="hide()"><span class="iconfont" >&#xe720; </span>返回</div>
+      <div class="back" @click="hide()">
+        <span class="iconfont">&#xe720; </span>返回
+      </div>
       <h1 class="name">{{ title }}</h1>
       <!-- <span class="success" @click="handle_selected()">完成</span> -->
-      <span  v-if="type == 1" class="success">  </span>
-      <span  v-if="type == 2" @click="handle_selected" class="success">确定</span>
+      <span v-if="type == 1" class="success"> </span>
+      <span v-if="type == 2" @click="handle_selected" class="success"
+        >确定</span
+      >
     </div>
 
     <div class="optionsBox" v-show="type == 1">
       <div class="list">
         <ul>
-          <li v-for="(item, i) in single.options" 
-          :key="i" 
-          :value="single.id_key.lenght == 0 ? item : item[single.id_key]" 
-          :class="single.cur_id == (single.id_key.lenght == 0 ? item : item[single.id_key]) ? 'tick':'' "
-          @click="single_click(single.id_key.lenght == 0 ? item : item[single.id_key])">
+          <li
+            v-for="(item, i) in single.options"
+            :key="i"
+            :value="single.id_key.lenght == 0 ? item : item[single.id_key]"
+            :class="
+              single.cur_id ==
+              (single.id_key.lenght == 0 ? item : item[single.id_key])
+                ? 'tick'
+                : ''
+            "
+            @click="
+              single_click(
+                single.id_key.lenght == 0 ? item : item[single.id_key]
+              )
+            "
+          >
             {{ single.show_key.lenght == 0 ? item : item[single.show_key] }}
           </li>
         </ul>
@@ -25,8 +40,13 @@
     <div class="CheckBox" v-show="type == 2">
       <ul>
         <li>
-          <van-checkbox-group v-model="mutable.selected_values"  >
-            <van-checkbox style="border-bottom: 1px #e5e5e5 solid;padding: 0 0.38rem;width:100%;" v-for="(item, index) in mutable.options" :key="index" :name="mutable.id_key.lenght == 0 ? item : item[mutable.id_key]">
+          <van-checkbox-group v-model="mutable.selected_values">
+            <van-checkbox
+              style="border-bottom: 1px #e5e5e5 solid;padding: 0 0.38rem;width:100%;"
+              v-for="(item, index) in mutable.options"
+              :key="index"
+              :name="mutable.id_key.lenght == 0 ? item : item[mutable.id_key]"
+            >
               {{ mutable.show_key.lenght == 0 ? item : item[mutable.show_key] }}
             </van-checkbox>
           </van-checkbox-group>
@@ -54,28 +74,36 @@ export default {
         options: [],
         cur_id: 0,
         show_key: "",
-        id_key: "",
+        id_key: ""
       },
 
       mutable: {
         options: [],
         selected_values: [],
         show_key: "",
-        id_key: "",
+        id_key: ""
       }
     };
   },
   methods: {
-    showSingleSelect(list_options, current_select_id, title, show_key, id_key, handle_select, handle_hide) {
-      this.show = true
-      this.type = 1
-      this.title = title
-      this.single.options = list_options
-      this.single.cur_id = current_select_id
-      this.single.show_key = show_key
-      this.single.id_key = id_key
-      this.handle_select = handle_select
-      this.handle_hide = handle_hide
+    showSingleSelect(
+      list_options,
+      current_select_id,
+      title,
+      show_key,
+      id_key,
+      handle_select,
+      handle_hide
+    ) {
+      this.show = true;
+      this.type = 1;
+      this.title = title;
+      this.single.options = list_options;
+      this.single.cur_id = current_select_id;
+      this.single.show_key = show_key;
+      this.single.id_key = id_key;
+      this.handle_select = handle_select;
+      this.handle_hide = handle_hide;
     },
     // showMutableSelect(list_options, selected_values, title, show_key, id_key, handle_select) {
     //   this.show = true
@@ -89,18 +117,18 @@ export default {
     // },
     hide() {
       if (this.handle_hide != null && this.handle_hide != undefined) {
-        this.handle_hide()
+        this.handle_hide();
       }
-      this.show = false
+      this.show = false;
     },
     single_click: function(id) {
-      this.single.cur_id = id
-      this.finish_selected()
-      this.hide()
+      this.single.cur_id = id;
+      this.finish_selected();
+      this.hide();
     },
-    finish_selected: function () {
+    finish_selected: function() {
       if (this.handle_select != null && this.handle_select != undefined) {
-        this.handle_select(this.single.cur_id)
+        this.handle_select(this.single.cur_id);
       }
     }
   }
@@ -108,16 +136,19 @@ export default {
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-.van-checkbox__icon--checked .van-icon{
+.van-checkbox__icon--checked .van-icon {
   color: #fff;
-    border-color:$main-color !important;
-    background-color: $main-color !important;
+  border-color: $main-color !important;
+  background-color: $main-color !important;
 }
 .optionsBox {
   background: #fff;
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
     li {
       height: 1rem;
@@ -147,7 +178,7 @@ export default {
   background: #fff;
   max-height: 10.6rem;
   min-height: 5rem;
-  overflow-y: scroll; 
+  overflow-y: scroll;
   ul {
     li {
       line-height: 1rem;
@@ -155,4 +186,3 @@ export default {
   }
 }
 </style>
-

src/pages/main/dialog/new_order/select_advice_template_dialog.vue

@@ -1,196 +1,259 @@
 <template>
-    <div v-if="visibility" class="Dialog">
-        <div class="DialogTit">
-            <div class="back" @click="backAction">
-                <span class="iconfont">&#xe720;</span>返回
-            </div>
-            <h1 class="name">医嘱模板</h1>
-            <span class="success" @click="submitAction">完成</span>
-        </div>
-
-        <div class="optionsBox">
-            <div>
-                <div v-for="(template, index) in templates" :key="index">
-                    <div class="template">
-                        <div class="template_name">
-                            <div v-show="isFold(template.id) && !isTemplateSelectingAllAdvices(template)" class="select_all_btn" @click="selectTemplateAllAdviceAction(template)">全选</div>
-                            <div v-show="isFold(template.id) && isTemplateSelectingAllAdvices(template)" class="select_all_btn" @click="cancelSelectTemplateAllAdviceAction(template)">取消全选</div>
+  <div v-if="visibility" class="Dialog">
+    <div class="DialogTit">
+      <div class="back" @click="backAction">
+        <span class="iconfont">&#xe720;</span>返回
+      </div>
+      <h1 class="name">医嘱模板</h1>
+      <span class="success" @click="submitAction">完成</span>
+    </div>
 
-                            <span v-if="isFold(template.id)" class="iconfont">&#xe749;</span>
-                            <span v-if="!isFold(template.id)" class="iconfont">&#xe74a;</span>
-                            <div @click="foldTemplateAction(template.id)" class="name">
-                                {{ template.name }}
-                            </div>
-                        </div>
-                        <div v-show="isFold(template.id)" class="advice" v-for="(advice, index) in template.DoctorAdviceTemplate" :key="index">
-                            <span v-if="advice.parent_id > 0" class="subdrug_info">
-                              <span> {{ advice.advice_name }}</span>
-                              <span> {{ advice.advice_desc }}{{advice.drug_spec_unit}} </span>
-                              <span v-if="advice.prescribing_number"> {{ advice.prescribing_number }} {{ advice.prescribing_number_unit }}</span>
-                              <span v-if="advice.single_dose">  单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }}</span>
+    <div class="optionsBox">
+      <div>
+        <div v-for="(template, index) in templates" :key="index">
+          <div class="template">
+            <div class="template_name">
+              <div
+                v-show="
+                  isFold(template.id) &&
+                    !isTemplateSelectingAllAdvices(template)
+                "
+                class="select_all_btn"
+                @click="selectTemplateAllAdviceAction(template)"
+              >
+                全选
+              </div>
+              <div
+                v-show="
+                  isFold(template.id) && isTemplateSelectingAllAdvices(template)
+                "
+                class="select_all_btn"
+                @click="cancelSelectTemplateAllAdviceAction(template)"
+              >
+                取消全选
+              </div>
 
-                            </span>
-                            <van-checkbox v-else class="advice_info" :value="isAdviceSelecting(advice.id)" @click="selectAdviceAction(template, advice)">
-                              <span> {{ advice.advice_name }}</span>
-                              <span> {{ advice.advice_desc }}{{advice.drug_spec_unit}}</span>
-                              <span v-if="advice.prescribing_number"> {{ advice.prescribing_number }} {{ advice.prescribing_number_unit }}</span>
-                              <span v-if="advice.single_dose">  单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }}</span>
-                              <span> {{ advice.delivery_way }} </span>
-                              <span> {{ advice.execution_frequency }}</span>
-                              <!--{{ advice.advice_name }} {{ advice.advice_desc }} {{ advice.prescribing_number }}{{ advice.prescribing_number_unit }} 单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }} {{ advice.delivery_way }} {{ advice.execution_frequency }}-->
-                            </van-checkbox>
-                        </div>
-                    </div>
-                </div>
+              <span v-if="isFold(template.id)" class="iconfont">&#xe749;</span>
+              <span v-if="!isFold(template.id)" class="iconfont">&#xe74a;</span>
+              <div @click="foldTemplateAction(template.id)" class="name">
+                {{ template.name }}
+              </div>
+            </div>
+            <div
+              v-show="isFold(template.id)"
+              class="advice"
+              v-for="(advice, index) in template.DoctorAdviceTemplate"
+              :key="index"
+            >
+              <span v-if="advice.parent_id > 0" class="subdrug_info">
+                <span> {{ advice.advice_name }}</span>
+                <span>
+                  {{ advice.advice_desc }}{{ advice.drug_spec_unit }}
+                </span>
+                <span v-if="advice.prescribing_number">
+                  {{ advice.prescribing_number }}
+                  {{ advice.prescribing_number_unit }}</span
+                >
+                <span v-if="advice.single_dose">
+                  单次用量{{ advice.single_dose
+                  }}{{ advice.single_dose_unit }}</span
+                >
+              </span>
+              <van-checkbox
+                v-else
+                class="advice_info"
+                :value="isAdviceSelecting(advice.id)"
+                @click="selectAdviceAction(template, advice)"
+              >
+                <span> {{ advice.advice_name }}</span>
+                <span>
+                  {{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span
+                >
+                <span v-if="advice.prescribing_number">
+                  {{ advice.prescribing_number }}
+                  {{ advice.prescribing_number_unit }}</span
+                >
+                <span v-if="advice.single_dose">
+                  单次用量{{ advice.single_dose
+                  }}{{ advice.single_dose_unit }}</span
+                >
+                <span> {{ advice.delivery_way }} </span>
+                <span> {{ advice.execution_frequency }}</span>
+                <!--{{ advice.advice_name }} {{ advice.advice_desc }} {{ advice.prescribing_number }}{{ advice.prescribing_number_unit }} 单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }} {{ advice.delivery_way }} {{ advice.execution_frequency }}-->
+              </van-checkbox>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "SelectAdviceTemplate",
-    props: {
-        visibility: {
-            type: Boolean,
-            default: false
-        },
-        templates: {
-            type: Array,
-            default: () => {
-                return []
-            }
+  name: "SelectAdviceTemplate",
+  props: {
+    visibility: {
+      type: Boolean,
+      default: false
+    },
+    templates: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      fold_template_ids: [],
+      selecting_advice_ids: []
+    };
+  },
+  methods: {
+    backAction: function() {
+      this.$emit("back");
+    },
+    foldTemplateAction: function(template_id) {
+      for (let index = 0; index < this.fold_template_ids.length; index++) {
+        if (this.fold_template_ids[index] == template_id) {
+          this.fold_template_ids.splice(index, 1);
+          return;
         }
+      }
+      this.fold_template_ids.push(template_id);
     },
-    data() {
-        return {
-            fold_template_ids: [],
-            selecting_advice_ids: [],
+    selectAdviceAction: function(template, advice) {
+      var isCancelSelect = false;
+      for (let index = 0; index < this.selecting_advice_ids.length; index++) {
+        if (this.selecting_advice_ids[index].advice_id == advice.id) {
+          this.selecting_advice_ids.splice(index, 1);
+          isCancelSelect = true;
+          break;
         }
+      }
+      if (!isCancelSelect) {
+        this.selecting_advice_ids.push({
+          template_id: template.id,
+          advice_id: advice.id
+        });
+      }
     },
-    methods: {
-        backAction: function() {
-            this.$emit("back");
-        },
-        foldTemplateAction: function(template_id) {
-            for (let index = 0; index < this.fold_template_ids.length; index++) {
-                if (this.fold_template_ids[index] == template_id) {
-                    this.fold_template_ids.splice(index, 1)
-                    return
-                }
-            }
-            this.fold_template_ids.push(template_id)
-        },
-        selectAdviceAction: function(template, advice) {
-            var isCancelSelect = false;
-            for (let index = 0; index < this.selecting_advice_ids.length; index++) {
-                if (this.selecting_advice_ids[index].advice_id == advice.id) {
-                    this.selecting_advice_ids.splice(index, 1)
-                    isCancelSelect = true
-                    break
-                }
-            }
-            if (!isCancelSelect) {
-                this.selecting_advice_ids.push({ template_id: template.id, advice_id: advice.id })
-            }
-        },
-        selectTemplateAllAdviceAction: function(template) {
-            for (let index = 0; index < template.DoctorAdviceTemplate.length; index++) {
-                const advice = template.DoctorAdviceTemplate[index];
-                if (advice.parent_id > 0) {
-                    continue
-                }
-                var didSelect = false
-                for (let s_a_index = 0; s_a_index < this.selecting_advice_ids.length; s_a_index++) {
-                    if (this.selecting_advice_ids[s_a_index].advice_id == advice.id) {
-                        didSelect = true
-                        break
-                    }
-                }
-                if (!didSelect) {
-                    this.selecting_advice_ids.push({ template_id: template.id, advice_id: advice.id })
-                }
-            }
-        },
-        cancelSelectTemplateAllAdviceAction: function(template) {
-            for (let index = this.selecting_advice_ids.length - 1; index >= 0; index--) {
-                if (this.selecting_advice_ids[index].template_id == template.id) {
-                    this.selecting_advice_ids.splice(index, 1)
-                }
-            }
-        },
-        submitAction: function() {
-            var advices = []
-            // WAIN: 效率低，可以通过在 selecting_advice_ids 加上 template_index 和 advice_index 字段来消除 this.templates 的循环
-            for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
-                const tpl_advice = this.selecting_advice_ids[t_a_i];
-                for (let t_i = 0; t_i < this.templates.length; t_i++) {
-                    const tpl = this.templates[t_i];
-                    if (tpl.id == tpl_advice.template_id) {
-                        var child_begin = false
-                        for (let a_i = 0; a_i < tpl.DoctorAdviceTemplate.length; a_i++) {
-                            const adv = tpl.DoctorAdviceTemplate[a_i];
-                            if (adv.id == tpl_advice.advice_id) {
-                                advices.push(adv)
-                                child_begin = true
-
-                            } else if (child_begin == true) {
-                                if (adv.parent_id == tpl_advice.advice_id) {
-                                    advices.push(adv)
-                                } else {
-                                    break
-                                }
-                            }
-                        }
-                    }
+    selectTemplateAllAdviceAction: function(template) {
+      for (
+        let index = 0;
+        index < template.DoctorAdviceTemplate.length;
+        index++
+      ) {
+        const advice = template.DoctorAdviceTemplate[index];
+        if (advice.parent_id > 0) {
+          continue;
+        }
+        var didSelect = false;
+        for (
+          let s_a_index = 0;
+          s_a_index < this.selecting_advice_ids.length;
+          s_a_index++
+        ) {
+          if (this.selecting_advice_ids[s_a_index].advice_id == advice.id) {
+            didSelect = true;
+            break;
+          }
+        }
+        if (!didSelect) {
+          this.selecting_advice_ids.push({
+            template_id: template.id,
+            advice_id: advice.id
+          });
+        }
+      }
+    },
+    cancelSelectTemplateAllAdviceAction: function(template) {
+      for (
+        let index = this.selecting_advice_ids.length - 1;
+        index >= 0;
+        index--
+      ) {
+        if (this.selecting_advice_ids[index].template_id == template.id) {
+          this.selecting_advice_ids.splice(index, 1);
+        }
+      }
+    },
+    submitAction: function() {
+      var advices = [];
+      // WAIN: 效率低，可以通过在 selecting_advice_ids 加上 template_index 和 advice_index 字段来消除 this.templates 的循环
+      for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
+        const tpl_advice = this.selecting_advice_ids[t_a_i];
+        for (let t_i = 0; t_i < this.templates.length; t_i++) {
+          const tpl = this.templates[t_i];
+          if (tpl.id == tpl_advice.template_id) {
+            var child_begin = false;
+            for (let a_i = 0; a_i < tpl.DoctorAdviceTemplate.length; a_i++) {
+              const adv = tpl.DoctorAdviceTemplate[a_i];
+              if (adv.id == tpl_advice.advice_id) {
+                advices.push(adv);
+                child_begin = true;
+              } else if (child_begin == true) {
+                if (adv.parent_id == tpl_advice.advice_id) {
+                  advices.push(adv);
+                } else {
+                  break;
                 }
+              }
             }
-            this.$emit("finish", advices)
+          }
+        }
+      }
+      this.$emit("finish", advices);
 
-            this.$nextTick(() => {
-                this.fold_template_ids = []
-                this.selecting_advice_ids = []
-            })
-        },
+      this.$nextTick(() => {
+        this.fold_template_ids = [];
+        this.selecting_advice_ids = [];
+      });
+    },
 
-        isFold: function(template_id) {
-            for (let index = 0; index < this.fold_template_ids.length; index++) {
-                if (this.fold_template_ids[index] == template_id) {
-                    return true
-                }
-            }
-            return false
-        },
-        isAdviceSelecting: function(advice_id) {
-            for (let index = 0; index < this.selecting_advice_ids.length; index++) {
-                if (this.selecting_advice_ids[index].advice_id == advice_id) {
-                    return true
-                }
-            }
-            return false
-        },
-        isTemplateSelectingAllAdvices: function(template) {
-            var count = 0
-            for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
-                if (this.selecting_advice_ids[t_a_i].template_id == template.id) {
-                    count ++;
-                }
-            }
+    isFold: function(template_id) {
+      for (let index = 0; index < this.fold_template_ids.length; index++) {
+        if (this.fold_template_ids[index] == template_id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    isAdviceSelecting: function(advice_id) {
+      for (let index = 0; index < this.selecting_advice_ids.length; index++) {
+        if (this.selecting_advice_ids[index].advice_id == advice_id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    isTemplateSelectingAllAdvices: function(template) {
+      var count = 0;
+      for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
+        if (this.selecting_advice_ids[t_a_i].template_id == template.id) {
+          count++;
+        }
+      }
 
-            var p_advice_count = 0
-            for (let index = 0; index < template.DoctorAdviceTemplate.length; index++) {
-                if (template.DoctorAdviceTemplate[index].parent_id == 0) {
-                    p_advice_count++;
-                }
-            }
-            if (count < p_advice_count) {
-                return false
-            } else {
-                return true
-            }
+      var p_advice_count = 0;
+      for (
+        let index = 0;
+        index < template.DoctorAdviceTemplate.length;
+        index++
+      ) {
+        if (template.DoctorAdviceTemplate[index].parent_id == 0) {
+          p_advice_count++;
         }
+      }
+      if (count < p_advice_count) {
+        return false;
+      } else {
+        return true;
+      }
     }
-}
+  }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
@@ -199,6 +262,9 @@ export default {
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
     li {
       height: 1rem;
@@ -225,46 +291,46 @@ export default {
   }
 
   .template {
-      border-bottom: 1px #e5e5e5 solid;
+    border-bottom: 1px #e5e5e5 solid;
 
-      .template_name {
-        height: 1rem;
-        line-height: 1rem;
-        padding: 0 0.38rem;
+    .template_name {
+      height: 1rem;
+      line-height: 1rem;
+      padding: 0 0.38rem;
 
-        .select_all_btn {
-            display: inline-block;
-            border: 1px #409eff solid;
-            color: #409eff;
-            font-size: 0.3rem;
-            height: 0.5rem;
-            line-height: 0.5rem;
-            padding: 0 0.1rem;
-            margin-right: 0.1rem;
-            border-radius: 0.08rem;
-        }
-        .name {
-            display: inline-block;
-            width: 80%;
-        }
+      .select_all_btn {
+        display: inline-block;
+        border: 1px #409eff solid;
+        color: #409eff;
+        font-size: 0.3rem;
+        height: 0.5rem;
+        line-height: 0.5rem;
+        padding: 0 0.1rem;
+        margin-right: 0.1rem;
+        border-radius: 0.08rem;
+      }
+      .name {
+        display: inline-block;
+        width: 80%;
       }
+    }
 
-      .advice {
-          border-top: 1px #e5e5e5 solid;
-          margin-left: 0.38rem;
-          color: #445a70;
+    .advice {
+      border-top: 1px #e5e5e5 solid;
+      margin-left: 0.38rem;
+      color: #445a70;
 
-          .advice_info {
-              height: 1rem;
-              line-height: 1rem;
-              padding: 0 0.38rem 0 0;
-          }
-          .subdrug_info {
-              height: 1rem;
-              line-height: 1rem;
-              padding: 0 0.38rem 0 0.9rem;
-          }
+      .advice_info {
+        height: 1rem;
+        line-height: 1rem;
+        padding: 0 0.38rem 0 0;
+      }
+      .subdrug_info {
+        height: 1rem;
+        line-height: 1rem;
+        padding: 0 0.38rem 0 0.9rem;
       }
+    }
   }
 }
 .CheckBox {
@@ -272,6 +338,10 @@ export default {
   max-height: 6.8rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    max-height: 8rem !important;
+    min-height: 8rem !important;
+  }
   ul {
     li {
       line-height: 1rem;
@@ -279,5 +349,3 @@ export default {
   }
 }
 </style>
-
-

src/pages/main/dialog/new_order/single_option_dialog.vue

@@ -15,9 +15,19 @@
           <li
             @click="itemClick(index)"
             v-for="(option, index) in options"
-            :key="option_key != null && option_key.length > 0 ? option[option_key] : index"
+            :key="
+              option_key != null && option_key.length > 0
+                ? option[option_key]
+                : index
+            "
             :class="select_index == index ? 'tick' : ''"
-          >{{ option_label_key != null && option_label_key.length > 0 ? option[option_label_key] : option }}</li>
+          >
+            {{
+              option_label_key != null && option_label_key.length > 0
+                ? option[option_label_key]
+                : option
+            }}
+          </li>
         </ul>
       </div>
     </div>
@@ -72,10 +82,13 @@ export default {
 .optionsBox {
   background: #fff;
   min-height: 5rem;
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
-  overflow-y: scroll;
-  max-height: 9.0rem;
-  li {
+    overflow-y: scroll;
+    max-height: 9rem;
+    li {
       height: 1rem;
       line-height: 1rem;
       border-bottom: 1px #e5e5e5 solid;
@@ -104,6 +117,10 @@ export default {
   max-height: 6.8rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    max-height: 8rem !important;
+    min-height: 8rem !important;
+  }
   ul {
     li {
       line-height: 1rem;

src/pages/main/dialog/subMenu/LongDialogMenu.vue

@@ -1,52 +1,57 @@
 <template>
-    <div class="Dialog">
-        <div class="DialogTit">
-            <span class="iconfont" @click="closeDialog()">&#xe720; 返回</span>
-            <h1 class="name">{{title}}</h1>
-            <span class="success"></span>
-        </div>
+  <div class="Dialog">
+    <div class="DialogTit">
+      <span class="iconfont" @click="closeDialog()">&#xe720; 返回</span>
+      <h1 class="name">{{ title }}</h1>
+      <span class="success"></span>
+    </div>
 
-        <div class="optionsBox">
-          <div class="list">
-            <ul>
-              <li @click="handleClick(item)" v-for="item in optionList" :key="item.id" value="item.id" :class="index == item.id? 'tick':'' ">{{item.name}}</li>
-            </ul>
-          </div>
-        </div>
+    <div class="optionsBox">
+      <div class="list">
+        <ul>
+          <li
+            @click="handleClick(item)"
+            v-for="item in optionList"
+            :key="item.id"
+            value="item.id"
+            :class="index == item.id ? 'tick' : ''"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: "LongDialogMenu",
-  props:{
-      title:'',
-      index:0,
-      option_poro:{
-          type:Array,
-      },
-      show_prop:{
-        type: Object,
-      },
-      show_index:{
-        type: Number,
-        default:0,
-      },
-      data_prop:{
-
-      },
-      data_mode:{
-        type: String,
-      }
-
+  props: {
+    title: "",
+    index: 0,
+    option_poro: {
+      type: Array
+    },
+    show_prop: {
+      type: Object
+    },
+    show_index: {
+      type: Number,
+      default: 0
+    },
+    data_prop: {},
+    data_mode: {
+      type: String
+    }
   },
-  methods:{
-    handleClick(item){
+  methods: {
+    handleClick(item) {
       switch (this.data_mode) {
         case "mode":
           this.data_prop.mode_id = item.id;
           this.data_prop.mode_name = item.name;
-          this.data_prop.mode = item.id;     
+          this.data_prop.mode = item.id;
           break;
         case "perfusion_apparatus":
           this.data_prop.perfusion_apparatus = item.id;
@@ -68,23 +73,23 @@ export default {
           this.data_prop.hemodialysis_machine = item.id;
           this.data_prop.hemodialysis_machine_name = item.name;
           break;
-      
+
         default:
           break;
       }
       this.show_prop.mode_show[this.show_index] = false;
       this.show_prop.paden_show = true;
     },
-    closeDialog(){
+    closeDialog() {
       this.show_prop.paden_show = true;
       this.show_prop.mode_show[this.show_index] = false;
-    },
+    }
   },
   data() {
     return {
       // index: 0,
       optionList: this.option_poro,
-      id:this.id_prop,
+      id: this.id_prop
     };
   }
 };
@@ -96,6 +101,9 @@ export default {
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
     li {
       height: 1rem;
@@ -125,7 +133,7 @@ export default {
   background: #fff;
   max-height: 10.6rem;
   min-height: 5rem;
-  overflow-y: scroll; 
+  overflow-y: scroll;
   ul {
     li {
       line-height: 1rem;
@@ -133,4 +141,3 @@ export default {
   }
 }
 </style>
-

src/pages/main/dialog/subMenu/checkBoxSubMenu.vue

@@ -1,20 +1,31 @@
 <template>
   <div v-if="visibility" class="Dialog">
     <div class="DialogTit">
-      <div class="back" @click="cancle()"><span class="iconfont" >&#xe720; </span>返回</div>
-      <h1 class="name">{{propsForm.title}}</h1>
-      <span  v-if="propsForm.isMultiple == 1" @click="comfirm" class="success">  </span>
-      <span  v-if="propsForm.isMultiple == 2" @click="comfirm" class="success">确定</span>
-
+      <div class="back" @click="cancle()">
+        <span class="iconfont">&#xe720; </span>返回
+      </div>
+      <h1 class="name">{{ propsForm.title }}</h1>
+      <span v-if="propsForm.isMultiple == 1" @click="comfirm" class="success">
+      </span>
+      <span v-if="propsForm.isMultiple == 2" @click="comfirm" class="success"
+        >确定</span
+      >
     </div>
 
     <div v-if="propsForm.isMultiple == 1" class="optionsBox">
       <div class="list">
         <ul>
-          <li  @click="itemClick(-2)"  :key="-2" value="-2" >请选择</li>
-          <li  @click="itemClick(item.id)"  v-for="item in propsForm.optionList" :key="item.id" value="item" :class="propsForm.selectId == item.id? 'tick':'' ">{{item.name}}</li>
+          <li @click="itemClick(-2)" :key="-2" value="-2">请选择</li>
+          <li
+            @click="itemClick(item.id)"
+            v-for="item in propsForm.optionList"
+            :key="item.id"
+            value="item"
+            :class="propsForm.selectId == item.id ? 'tick' : ''"
+          >
+            {{ item.name }}
+          </li>
           <!--<li v-if="propsForm.isHasOther == 1 && this.$store.getters.user.template_info.template_id == 2" @click="itemClick(-1)"  :key="-1" value="-1" :class="propsForm.selectId == -1? 'tick':'' ">其他</li>-->
-
         </ul>
       </div>
     </div>
@@ -22,7 +33,7 @@
     <div v-if="propsForm.isMultiple == 2" class="CheckBox">
       <ul>
         <li>
-          <van-checkbox-group v-model="propsForm.result" >
+          <van-checkbox-group v-model="propsForm.result">
             <van-checkbox
               style="border-bottom: 1px #e5e5e5 solid;padding: 0 0.38rem"
               v-for="(item, index) in propsForm.list"
@@ -79,7 +90,7 @@ export default {
       return form;
     },
     itemClick: function(id) {
-      if(id == -2){
+      if (id == -2) {
         this.$emit("menu-empty", this.getValue());
       }
       this.propsForm.selectId = id;
@@ -97,18 +108,21 @@ export default {
 <style style="stylesheet/scss" lang="scss" scoped>
 .optionsBox {
   background: #fff;
-  max-height: 10.0rem;
+  max-height: 10rem;
   min-height: 5rem;
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
+  }
   ul {
-  overflow-y: scroll;
-  max-height: 9.0rem;
+    overflow-y: scroll;
+    max-height: 9rem;
     li {
       height: 1.1rem;
       line-height: 1.1rem;
       border-bottom: 1px #e5e5e5 solid;
       padding: 0 0.38rem;
       font-size: 0.36rem;
-      color:$title-color;
+      color: $title-color;
     }
     .tick {
       position: relative;
@@ -133,6 +147,10 @@ export default {
   max-height: 6.8rem;
   min-height: 5rem;
   overflow-y: scroll;
+  @media only screen and (max-width: 812px) {
+    max-height: 8rem !important;
+    min-height: 8rem !important;
+  }
 
   ul {
     li {
@@ -141,4 +159,3 @@ export default {
   }
 }
 </style>
-

src/pages/main/dialog/subMenu/newCheckBoxSubMenu.vue

@@ -1,123 +1,136 @@
 <template>
   <div v-if="show" class="Dialog">
     <div class="DialogTit">
-      <div class="back" @click="cancle()"><span class="iconfont" >&#xe720; </span>返回</div>
-      <h1 class="name">{{propsForm.title}}</h1>
-      <span  @click="comfirm" class="success">  </span>
+      <div class="back" @click="cancle()">
+        <span class="iconfont">&#xe720; </span>返回
+      </div>
+      <h1 class="name">{{ propsForm.title }}</h1>
+      <span @click="comfirm" class="success"> </span>
     </div>
-    <div  class="optionsBox">
+    <div class="optionsBox">
       <div class="list">
         <ul>
-          <li  @click="itemClick(-2)"  :key="-2" value="-2" >请选择</li>
-          <li  @click="itemClick(item.id)"  v-for="item in propsForm.optionList" :key="item.id" value="item" :class="propsForm.selectId == item.id? 'tick':'' ">{{item.name}}</li>
+          <li @click="itemClick(-2)" :key="-2" value="-2">请选择</li>
+          <li
+            @click="itemClick(item.id)"
+            v-for="item in propsForm.optionList"
+            :key="item.id"
+            value="item"
+            :class="propsForm.selectId == item.id ? 'tick' : ''"
+          >
+            {{ item.name }}
+          </li>
         </ul>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
-
-  export default {
-    name: "newCheckBoxSubMenu",
-    created() {},
-    data() {
-      return {
-        result: [],
-        id: 0,
-        selectName: ""
-      };
+export default {
+  name: "newCheckBoxSubMenu",
+  created() {},
+  data() {
+    return {
+      result: [],
+      id: 0,
+      selectName: ""
+    };
+  },
+  props: {
+    propsForm: {
+      type: Object
     },
-    props: {
-      propsForm: {
-        type: Object
-      },
-      show: {
-        type: Boolean,
-        default: false
-      }
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    cancle: function() {
+      this.$emit("menu-cancle");
+    },
+    comfirm: function() {
+      this.$emit("menu-comfirm", this.getValue());
     },
-    methods: {
-      cancle: function() {
-        this.$emit("menu-cancle");
-      },
-      comfirm: function() {
-        this.$emit("menu-comfirm", this.getValue());
-      },
-      getValue: function() {
-        let form = {};
-        if (this.propsForm.isMultiple == 2) {
-          form["type"] = this.propsForm.type;
-          form["result"] = this.propsForm.result;
-          // form["click_ref"] = this.propsForm.click_ref
-        } else {
-          form["type"] = this.propsForm.type;
-          form["selectId"] = this.propsForm.selectId;
-          // form["click_ref"] = this.propsForm.click_ref
-        }
-        return form;
-      },
-      itemClick: function(id) {
-        if(id == -2){
-          this.$emit("menu-empty", this.getValue());
-        }
-        this.propsForm.selectId = id;
-        this.$emit("menu-comfirm", this.getValue());
+    getValue: function() {
+      let form = {};
+      if (this.propsForm.isMultiple == 2) {
+        form["type"] = this.propsForm.type;
+        form["result"] = this.propsForm.result;
+        // form["click_ref"] = this.propsForm.click_ref
+      } else {
+        form["type"] = this.propsForm.type;
+        form["selectId"] = this.propsForm.selectId;
+        // form["click_ref"] = this.propsForm.click_ref
       }
+      return form;
     },
-    watch: {
-      visibility(val) {
-        //初始化数据操作
+    itemClick: function(id) {
+      if (id == -2) {
+        this.$emit("menu-empty", this.getValue());
       }
+      this.propsForm.selectId = id;
+      this.$emit("menu-comfirm", this.getValue());
     }
-  };
-
+  },
+  watch: {
+    visibility(val) {
+      //初始化数据操作
+    }
+  }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .optionsBox {
+.optionsBox {
   background: #fff;
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
-  ul {
-  li {
-  height: 1.1rem;
-  line-height: 1.1rem;
-  border-bottom: 1px #e5e5e5 solid;
-  padding: 0 0.38rem;
-  font-size: 0.36rem;
-  color:$title-color;
-  }
-  .tick {
-  position: relative;
-  &::before {
-  content: "";
-  display: inline-block;
-  border: 2px solid $main-color;
-  border-top-width: 0;
-  border-right-width: 0;
-  width: 0.3rem;
-  height: 0.15rem;
-  -webkit-transform: rotate(-50deg);
-  position: absolute;
-  top: 0.38rem;
-  right: 0.44rem;
-  }
-  }
+  @media only screen and (max-width: 812px) {
+    min-height: 8rem !important;
   }
+  ul {
+    li {
+      height: 1.1rem;
+      line-height: 1.1rem;
+      border-bottom: 1px #e5e5e5 solid;
+      padding: 0 0.38rem;
+      font-size: 0.36rem;
+      color: $title-color;
+    }
+    .tick {
+      position: relative;
+      &::before {
+        content: "";
+        display: inline-block;
+        border: 2px solid $main-color;
+        border-top-width: 0;
+        border-right-width: 0;
+        width: 0.3rem;
+        height: 0.15rem;
+        -webkit-transform: rotate(-50deg);
+        position: absolute;
+        top: 0.38rem;
+        right: 0.44rem;
+      }
+    }
   }
-  .CheckBox {
+}
+.CheckBox {
   background: #fff;
   max-height: 6.8rem;
   min-height: 5rem;
   overflow-y: scroll;
-
-  ul {
-  li {
-  line-height: 1rem;
-  }
+  @media only screen and (max-width: 812px) {
+    max-height: 8rem !important;
+    min-height: 8rem !important;
   }
+  ul {
+    li {
+      line-height: 1rem;
+    }
   }
+}
 </style>

src/pages/main/records/CaseHistory.vue

@@ -2,14 +2,21 @@
   <div>
     <div class="nav">
       <ul style="width: 30%">
-        <li  v-for="(item,i) in ['基本信息','检验检查','医嘱']" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i,item)" >{{item}}</li>
+        <li
+          v-for="(item, i) in ['基本信息', '检验检查', '医嘱']"
+          :key="i"
+          :class="index == i ? 'active' : ''"
+          @click="ClickTab(i, item)"
+        >
+          {{ item }}
+        </li>
       </ul>
     </div>
 
     <div class="tab-content">
-      <records-tab  v-show="index==0"  ></records-tab>
-      <check-tab v-show="index==1" ref="item"></check-tab>
-      <advice-table v-show="index==2"></advice-table>
+      <records-tab v-show="index == 0"></records-tab>
+      <check-tab v-show="index == 1" ref="item"></check-tab>
+      <advice-table v-show="index == 2"></advice-table>
     </div>
   </div>
 </template>
@@ -65,13 +72,16 @@ export default {
 <style style="stylesheet/scss" lang="scss" scoped>
 .nav {
   border-bottom: 1px #e5e5e5 solid;
-    position: fixed;
+  position: fixed;
   top: 63px;
   right: 0;
   z-index: 66;
   left: 1.58rem;
   background: #fff;
-    background: #fff;
+  background: #fff;
+  @media only screen and (max-width: 812px) {
+    top: 45px !important;
+  }
   ul {
     width: 60%;
     margin: 0 auto;
@@ -103,4 +113,3 @@ export default {
   }
 }
 </style>
-

src/pages/monitoring/index.vue

@@ -3,35 +3,58 @@
     <side-bar :active_index="1"></side-bar>
     <div class="mainContent">
       <div class="top">
-        <div class="hospital" style="width:4.2rem;" ><span style="visibility:hidden"></span></div>
+        <div class="hospital" style="width:4.2rem;">
+          <span style="visibility:hidden"></span>
+        </div>
         <div class="department">
           <ul>
             <li>透析监控</li>
           </ul>
         </div>
         <div class="search">
-          <van-field v-model="patient_keyword" ref="search_field" placeholder="透析号/姓名" class="field">
+          <van-field
+            v-model="patient_keyword"
+            ref="search_field"
+            placeholder="透析号/姓名"
+            class="field"
+          >
             <i class="iconfont" slot="left-icon">&#xe741;</i>
-            <van-button slot="button" size="small" type="info" style="border: none;" @click="searchWithKeyword(1)">搜索</van-button>
+            <van-button
+              slot="button"
+              size="small"
+              type="info"
+              style="border: none;"
+              @click="searchWithKeyword(1)"
+              >搜索</van-button
+            >
           </van-field>
         </div>
       </div>
 
       <div class="choice">
         <ul>
-          <el-popover
-            v-model="visible"
-            placement="bottom"
-            trigger="click">
-            <li slot="reference">{{partitionName(partition)}}<span class="iconfont">&#xe74a;</span></li>
+          <el-popover v-model="visible" placement="bottom" trigger="click">
+            <li slot="reference">
+              {{ partitionName(partition)
+              }}<span class="iconfont">&#xe74a;</span>
+            </li>
             <div class="popover-demo-content">
-              <ul >
-                <li v-for="item in partitionArr" :key="item.id" @click="itemClick(item.id)" :class="partition == item.id ? 'tick' : ''">{{item.name}}</li>
+              <ul>
+                <li
+                  v-for="item in partitionArr"
+                  :key="item.id"
+                  @click="itemClick(item.id)"
+                  :class="partition == item.id ? 'tick' : ''"
+                >
+                  {{ item.name }}
+                </li>
               </ul>
             </div>
           </el-popover>
-          <li @click="openPicker">{{parseTime(date.getTime()/1000, "{y}-{m}-{d}")}}<span
-            class="iconfont">&#xe74a;</span></li>
+          <li @click="openPicker">
+            {{ parseTime(date.getTime() / 1000, "{y}-{m}-{d}")
+            }}<span class="iconfont">&#xe74a;</span>
+          </li>
         </ul>
       </div>
       <van-list
@@ -40,8 +63,8 @@
         finished-text="  "
         @load="onLoad"
       >
-      <div class="blueBorder"></div>
-        <table class="table"  >
+        <div class="blueBorder"></div>
+        <table class="table">
           <tr>
             <th width="8%">机号</th>
             <th width="10%">姓名</th>
@@ -53,9 +76,14 @@
             <th width="27%">监控预警(血压/心率)</th>
           </tr>
         </table>
-        <table class="table" v-for="(items,index) in dialysis_scheduals" :key="index">
+
+        <table
+          class="table"
+          v-for="(items, index) in dialysis_scheduals"
+          :key="index"
+        >
           <tr v-if="items.zone_name.length > 0">
-            <td width="8%">{{items.zone_name}}</td>
+            <td width="8%">{{ items.zone_name }}</td>
             <td width="10%"></td>
             <td width="9%"></td>
             <td width="13%"></td>
@@ -64,27 +92,75 @@
             <td width="14%"></td>
             <td width="27%"></td>
           </tr>
-          <tr v-for="(item,index) in items.scheduals" :key="index" @click="clickfunction(item)">
-            <td width="8%">{{item.dialysis_order.device_number.number.length > 0 ? item.dialysis_order.device_number.number:item.device_number.number}}</td>
-            <td width="10%" style="color:#409eff;">{{item.patient.name}}</td>
-            <td width="9%">{{item.patient.dialysis_no}}</td>
-            <td width="13%">{{parseTime(item.schedule_date, "{y}-{m}-{d}")}}</td>
-            <td width="10%">{{item.treatment_mode.name}}</td>
-            <td width="9%">{{item.prescription.dewater_amount?item.prescription.dewater_amount:""}}</td>
+          <tr
+            v-for="(item, index) in items.scheduals"
+            :key="index"
+            @click="clickfunction(item)"
+          >
+            <td width="8%">
+              {{
+                item.dialysis_order.device_number.number.length > 0
+                  ? item.dialysis_order.device_number.number
+                  : item.device_number.number
+              }}
+            </td>
+            <td width="10%" style="color:#409eff;">{{ item.patient.name }}</td>
+            <td width="9%">{{ item.patient.dialysis_no }}</td>
+            <td width="13%">
+              {{ parseTime(item.schedule_date, "{y}-{m}-{d}") }}
+            </td>
+            <td width="10%">{{ item.treatment_mode.name }}</td>
+            <td width="9%">
+              {{
+                item.prescription.dewater_amount
+                  ? item.prescription.dewater_amount
+                  : ""
+              }}
+            </td>
             <td width="14%">
-              {{item.assessment_before_dislysis.weight_before?item.assessment_before_dislysis.weight_before:""}}/{{item.assessment_after_dislysis.weight_after?item.assessment_after_dislysis.weight_after:""}}
+              {{
+                item.assessment_before_dislysis.weight_before
+                  ? item.assessment_before_dislysis.weight_before
+                  : ""
+              }}/{{
+                item.assessment_after_dislysis.weight_after
+                  ? item.assessment_after_dislysis.weight_after
+                  : ""
+              }}
             </td>
             <td width="27%">
-              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 1">低压</span>
-              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 2">正常</span>
-              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 3">高压</span>
-              <span v-if="monitorRateStatus(item.monitoring_record) == 1">心率过缓</span>
-              <span v-if="monitorRateStatus(item.monitoring_record) == 2">正常</span>
-              <span v-if="monitorRateStatus(item.monitoring_record) == 3">心率过高</span>
+              <span
+                v-if="monitorBloodPressureStatus(item.monitoring_record) == 1"
+                >低压</span
+              >
+              <span
+                v-if="monitorBloodPressureStatus(item.monitoring_record) == 2"
+                >正常</span
+              >
+              <span
+                v-if="monitorBloodPressureStatus(item.monitoring_record) == 3"
+                >高压</span
+              >
+              <span v-if="monitorRateStatus(item.monitoring_record) == 1"
+                >心率过缓</span
+              >
+              <span v-if="monitorRateStatus(item.monitoring_record) == 2"
+                >正常</span
+              >
+              <span v-if="monitorRateStatus(item.monitoring_record) == 3"
+                >心率过高</span
+              >
             </td>
           </tr>
         </table>
-        <div class="NoData" v-show="dialysis_scheduals.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>
+
+        <div class="NoData" v-show="dialysis_scheduals.length == 0">
+          <img
+            style="margin-top: 50px; margin-bottom: 50px"
+            src="@/assets/login/data.jpg"
+            alt=""
+          />
+        </div>
       </van-list>
     </div>
     <mt-datetime-picker
@@ -92,7 +168,8 @@
       type="date"
       @confirm="handleDateConfirm"
       :endDate="new Date()"
-      v-model="date">
+      v-model="date"
+    >
     </mt-datetime-picker>
   </div>
 </template>
@@ -242,11 +319,20 @@ export default {
       }
       for (let i = 0; i < val.length; i++) {
         //舒张压（低压）(diastolic_blood_pressure)    收缩压(高压)(systolic_blood_pressure)
-        if (val[i].systolic_blood_pressure >= 140 || val[i].diastolic_blood_pressure >= 90) {
-          status = 3;  //高压
-        } else if (val[i].diastolic_blood_pressure < 60 || val[i].systolic_blood_pressure < 90) {
+        if (
+          val[i].systolic_blood_pressure >= 140 ||
+          val[i].diastolic_blood_pressure >= 90
+        ) {
+          status = 3; //高压
+        } else if (
+          val[i].diastolic_blood_pressure < 60 ||
+          val[i].systolic_blood_pressure < 90
+        ) {
           status = 1; //低压
-        } else if (val[i].diastolic_blood_pressure >= 60 || val[i].systolic_blood_pressure < 140) {
+        } else if (
+          val[i].diastolic_blood_pressure >= 60 ||
+          val[i].systolic_blood_pressure < 140
+        ) {
           status = 2; //正常
         }
 
@@ -354,9 +440,9 @@ export default {
   .iconfont {
     font-size: 0.4rem;
     color: #a8b3ba;
-  @media only screen and (max-width: 812px) {
-  margin-right: 0 !important;
-  }
+    @media only screen and (max-width: 812px) {
+      margin-right: 0 !important;
+    }
   }
 }
 .choice {
@@ -367,6 +453,9 @@ export default {
   z-index: 66;
   left: 1.58rem;
   background: #fff;
+  @media only screen and (max-width: 812px) {
+    top: 43px !important;
+  }
   ul {
     @include display-flex;
     @include align-items-center;
@@ -399,9 +488,12 @@ export default {
 .table {
   width: 100%;
 }
-.van-list{
-  padding-top:115px;
+.van-list {
+  padding-top: 115px;
   background: #fff;
   min-height: calc(100vh - 1px);
+  @media only screen and (max-width: 812px) {
+    padding-top: 80px !important;
+  }
 }
 </style>

src/pages/personal/ElectronicSignature.vue

@@ -11,7 +11,7 @@
       </h1>
       <div class="information">
         <div class="blueBorder"></div>
-        <div class="name" v-show="showpan=='canvas'">
+        <div class="name" v-show="showpan == 'canvas'">
           <canvas
             id="canvas"
             class="fl"
@@ -25,64 +25,72 @@
             @touchmove="canvasMove($event)"
           ></canvas>
         </div>
-        <div class="imagename" v-show="showpan=='image'">
-          <img :src="electronicsignature" alt="" srcset="">
+        <div class="imagename" v-show="showpan == 'image'">
+          <img :src="electronicsignature" alt="" srcset="" />
         </div>
         <div class="set">
           <el-row>
             <el-button @click="clearCanvas">重写签名</el-button>
-            <el-button :disabled="nobeginAction" type="primary" @click="getImageAction">上传签名</el-button>
+            <el-button
+              :disabled="nobeginAction"
+              type="primary"
+              @click="getImageAction"
+              >上传签名</el-button
+            >
           </el-row>
         </div>
       </div>
     </div>
     <el-dialog
-    title="提示"
-    :visible.sync="centerDialogVisible"
-    width="70%"
-    v-loading="loading"
-     element-loading-text="正在保存签名图片"
-     element-loading-spinner="el-icon-loading"
-    center>
-    <vue-cropper
-      ref="cropper"
-      :src="imgUrl"
-      alt="Source Image"
-      :cropmove="cropImage"
+      title="提示"
+      :visible.sync="centerDialogVisible"
+      width="70%"
+      v-loading="loading"
+      element-loading-text="正在保存签名图片"
+      element-loading-spinner="el-icon-loading"
+      center
     >
-    </vue-cropper>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="centerDialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="uploadImage">确 定</el-button>
-    </span>
-  </el-dialog>
-
+      <vue-cropper
+        ref="cropper"
+        :src="imgUrl"
+        alt="Source Image"
+        :cropmove="cropImage"
+      >
+      </vue-cropper>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="uploadImage">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import SideBar from "@/pages/layout/SideBar";
 import { getToken } from "@/api/qiniu";
-import { GetElectronicSignature, SaveElectronicSignature } from "@/api/admin_user";
-import VueCropper from 'vue-cropperjs';
-import { Toast  } from 'vant';
+import {
+  GetElectronicSignature,
+  SaveElectronicSignature
+} from "@/api/admin_user";
+import VueCropper from "vue-cropperjs";
+import { Toast } from "vant";
 
 export default {
   name: "ElectronicSignature",
   components: {
     VueCropper,
-    SideBar,
+    SideBar
   },
   data() {
     return {
-      showpan:'',
-      nobeginAction:true,
-      loading:false,
-      electronicsignature:'',
-      uptoken:"",
+      showpan: "",
+      nobeginAction: true,
+      loading: false,
+      electronicsignature: "",
+      uptoken: "",
       avatarUrl2: null,
-      centerDialogVisible:false,
-      cropper: '',
+      centerDialogVisible: false,
+      cropper: "",
       centerDialogVisible: false,
       colors: [
         "#fef4ac",
@@ -108,7 +116,7 @@ export default {
       ],
       context: {},
       imgUrl: "",
-      uploadImgUrl:'',
+      uploadImgUrl: "",
       canvasMoveUse: false,
       // 存储当前表面状态数组-上一步
       preDrawAry: [],
@@ -168,26 +176,27 @@ export default {
     }
   },
   methods: {
-    GetElectronicSignature(){
-      GetElectronicSignature().then(response=>{
-        if(response.data.state==1 && response.data.data.state==1) {
-          this.electronicsignature = response.data.data.electronic_signature.url;
-          this.showpan = 'image';
-        }else {
-          this.showpan = 'canvas';
+    GetElectronicSignature() {
+      GetElectronicSignature().then(response => {
+        if (response.data.state == 1 && response.data.data.state == 1) {
+          this.electronicsignature =
+            response.data.data.electronic_signature.url;
+          this.showpan = "image";
+        } else {
+          this.showpan = "canvas";
         }
       });
     },
-    getToken(){
+    getToken() {
       getToken().then(response => {
-        if(response.data.state==1) {
+        if (response.data.state == 1) {
           this.uptoken = response.data.data.uptoken;
         }
       });
     },
-    cropImage(event){
+    cropImage(event) {
       var dataurl = this.$refs.cropper.getCroppedCanvas();
-      var rectImage = dataurl.toDataURL('image/png');
+      var rectImage = dataurl.toDataURL("image/png");
       this.uploadImgUrl = rectImage;
     },
     isPc() {
@@ -287,65 +296,62 @@ export default {
         this.context.canvas.width,
         this.context.canvas.height
       );
-      
+
       this.context.fillStyle = this.config.fillStyle;
       this.context.fillRect(0, 0, 600, 400);
-      
+
       this.preDrawAry = [];
       this.nextDrawAry = [];
       this.middleAry = [this.middleAry[0]];
       this.nobeginAction = true;
-      this.showpan = 'canvas';
+      this.showpan = "canvas";
     },
     getImageAction() {
       this.getImage();
       this.centerDialogVisible = true;
 
-      if(typeof(this.$refs.cropper)!= 'undefined') {
+      if (typeof this.$refs.cropper != "undefined") {
         this.$refs.cropper.replace(this.imgUrl);
       }
-
     },
-    uploadImage(){
-      
+    uploadImage() {
       var dataurl = this.$refs.cropper.getCroppedCanvas();
-      var rectImage = dataurl.toDataURL('image/png');
+      var rectImage = dataurl.toDataURL("image/png");
       this.uploadImgUrl = rectImage;
 
-      if(typeof(this.uploadImgUrl) == 'undefined') {
-        Toast.fail('获取截图资源失败');
-        return  false;
+      if (typeof this.uploadImgUrl == "undefined") {
+        Toast.fail("获取截图资源失败");
+        return false;
       }
-      if(this.uptoken == '') {
-        Toast.fail('七牛上传token无效，无法上传');
-        return  false;
+      if (this.uptoken == "") {
+        Toast.fail("七牛上传token无效，无法上传");
+        return false;
       }
 
       this.loading = true;
-      var _this=this;
-      var pic = this.uploadImgUrl.split(',')[1];
+      var _this = this;
+      var pic = this.uploadImgUrl.split(",")[1];
       var url = "https://upload.qiniup.com/putb64/-1";
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = function() {
-
         if (xhr.readyState == 4) {
           var returnData = JSON.parse(xhr.responseText);
-          SaveElectronicSignature(returnData).then(response=>{
-            if(response.data.state==1) {
-              _this.electronicsignature = response.data.data.electronic_signature.url;
-              _this.showpan = 'image';
+          SaveElectronicSignature(returnData).then(response => {
+            if (response.data.state == 1) {
+              _this.electronicsignature =
+                response.data.data.electronic_signature.url;
+              _this.showpan = "image";
               _this.nobeginAction = true;
               _this.centerDialogVisible = false;
-              Toast.success('成功');
+              Toast.success("成功");
               // _this.$router.push({path: "/my"})
-            }else {
-              Toast.fail('保存图片时失败');
-              
+            } else {
+              Toast.fail("保存图片时失败");
             }
           });
           _this.loading = false;
         }
-      }
+      };
       xhr.open("POST", url, true);
       xhr.setRequestHeader("Content-Type", "application/octet-stream");
       xhr.setRequestHeader("Authorization", "UpToken " + _this.uptoken);
@@ -399,12 +405,12 @@ export default {
   .information {
     width: 100%;
     margin: 0 auto;
-    .imagename{
-        width: 600px;
-        margin: 0 auto;
-        text-align: center;
-        padding: 10px 0;
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+    .imagename {
+      width: 600px;
+      margin: 0 auto;
+      text-align: center;
+      padding: 10px 0;
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
     }
     .name {
       background: #fff;
@@ -412,6 +418,10 @@ export default {
       height: 400px;
       margin: 0 auto;
       border-radius: 4px;
+      @media only screen and (max-width: 812px) {
+        width: 500px !important;
+        height: 200px !important;
+      }
       .item {
         padding: 0.37rem 0.4rem;
         @include align-items-center;
@@ -446,4 +456,10 @@ export default {
     }
   }
 }
+.fl {
+  @media only screen and (max-width: 812px) {
+    width: 500px !important;
+    height: 200px !important;
+  }
+}
 </style>

src/styles/media.scss

@@ -1,6 +1,6 @@
 @media only screen and (max-width: 812px) {
   html {
-    font-size: 25px;
+    font-size: 29px;
   }
 }
 
@@ -10,3 +10,12 @@
 //     font-size: 50px;
 //   }
 // }
+
+@media screen and (orientation: portrait) and (max-width: 640px) {
+  // .mainBox {
+  //   -webkit-transform: rotate(-90deg);
+  //   -moz-transform: rotate(-90deg);
+  //   -ms-transform: rotate(-90deg);
+  //   transform: rotate(-90deg);
+  // }
+}

src/styles/style.scss

@@ -201,8 +201,8 @@
   @include justify-content-around;
   background: #fff;
   span {
-    height: 0.60rem;
-    line-height: 0.60rem;
+    height: 0.6rem;
+    line-height: 0.6rem;
     background: #fff;
     border-radius: 50px;
     border: 1px $border-color solid;
@@ -352,16 +352,27 @@
   width: 0.25rem;
   height: 0.25rem;
   background-color: #fff;
+  @media only screen and (max-width: 812px) {
+    width: 0 !important;
+    height: 0 !important;
+    background-color: transparent !important;
+  }
 }
 
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #fff;
+  @media only screen and (max-width: 812px) {
+    background-color: transparent !important;
+  }
 }
 
 ::-webkit-scrollbar-thumb {
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #e5e5e5;
+  @media only screen and (max-width: 812px) {
+    background-color: transparent !important;
+  }
 }
 
 // 弹窗样式
@@ -391,6 +402,9 @@
         font-size: 0.5rem;
         color: $main-color;
         font-weight: bold;
+        @media only screen and (max-width: 812px) {
+          font-size: 0.34rem !important;
+        }
       }
       .back {
         font-size: 0.36rem;
@@ -427,6 +441,9 @@
       height: 6.8rem;
       overflow-y: scroll;
       background: #fff;
+      @media only screen and (max-width: 812px) {
+        height: 8.8rem !important;
+      }
       .item {
         padding: 0 0.32rem;
         border-bottom: 1px #e5e5e5 solid;
@@ -551,12 +568,12 @@
   color: #fff;
   border-color: $main-color !important;
   background-color: $main-color !important;
-   @media only screen and (max-width: 812px) {
-      font-size: 14px !important;
-      line-height: 16px !important;
-      width: 16px !important;
-      height: 16px !important;
-    }
+  @media only screen and (max-width: 812px) {
+    font-size: 14px !important;
+    line-height: 16px !important;
+    width: 16px !important;
+    height: 16px !important;
+  }
 }
 
 .van-checkbox__icon .van-icon {
@@ -571,9 +588,9 @@
 .CheckBox .van-checkbox__label {
   width: 94%;
   font-size: 0.34rem;
-   @media only screen and (max-width: 812px) {
-      width: 90%;
-    }
+  @media only screen and (max-width: 812px) {
+    width: 90%;
+  }
 }
 
 .mint-datetime-action {
@@ -588,8 +605,8 @@
   width: 100%;
   text-align: center;
   background: #fff;
-  padding:0.3rem 0;
-  display:flex;
+  padding: 0.3rem 0;
+  display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -597,8 +614,8 @@
     width: 180px;
   }
 }
-.el-popper{
-  margin-top: 0!important;
+.el-popper {
+  margin-top: 0 !important;
 }
 
 .CheckBox,
@@ -645,57 +662,62 @@
 
 .el-form-item__label {
   font-size: 0.34rem !important; // width: 90px !important;
+  @media only screen and (max-width: 812px) {
+    text-align: left !important;
+  }
 }
 
 .el-radio__label {
   font-size: 0.32rem !important;
 }
 
-.el-radio+.el-radio {
+.el-radio + .el-radio {
   margin-left: 15px !important;
+  @media only screen and (max-width: 812px) {
+    margin-left: 0 !important;
+  }
 }
 
-
-.el-button--mini{
+.el-button--mini {
   font-size: 0.32rem !important;
 }
-.el-form-item__label,.el-radio,.van-checkbox__label {
-  color: $title-color!important;
+.el-form-item__label,
+.el-radio,
+.van-checkbox__label {
+  color: $title-color !important;
 }
 
-
-.el-collapse-item__header{
-  font-size: 0.35rem!important;
-  color: $pgh-color!important;
-  height: 64px!important;
-  line-height: 64px!important;
-   @media only screen and (max-width: 812px) {
-      font-size: 0.35rem !important;
-      color: $pgh-color !important;
-      height: 48px !important;
-      line-height: 48px !important;
-    }
+.el-collapse-item__header {
+  font-size: 0.35rem !important;
+  color: $pgh-color !important;
+  height: 64px !important;
+  line-height: 64px !important;
+  @media only screen and (max-width: 812px) {
+    font-size: 0.35rem !important;
+    color: $pgh-color !important;
+    height: 48px !important;
+    line-height: 48px !important;
+  }
 }
-.el-collapse-item__arrow{
-  color: #a8b3ba!important;
-  line-height: 64px!important;
-    @media only screen and (max-width: 812px) {
-      line-height: 48px !important;
-    }
+.el-collapse-item__arrow {
+  color: #a8b3ba !important;
+  line-height: 64px !important;
+  @media only screen and (max-width: 812px) {
+    line-height: 48px !important;
+  }
 }
 
-
 // 搜索全局
 .search {
   color: #a8b3ba;
   width: 4.2rem;
   float: right;
   font-size: 0.34rem;
-   .field {
-      @media only screen and (max-width: 812px) {
-        margin-top: 6px;
-      }
+  .field {
+    @media only screen and (max-width: 812px) {
+      margin-top: 6px;
     }
+  }
   .iconfont {
     color: #a8b3ba;
     font-size: 0.42rem;
@@ -706,8 +728,8 @@
     border-radius: 30px;
     display: flex;
     align-items: center;
-    height: 0.64rem!important;
-    line-height: 0.64rem!important;
+    height: 0.64rem !important;
+    line-height: 0.64rem !important;
     @media only screen and (max-width: 812px) {
       padding: 0 0 0 4px;
     }
@@ -740,7 +762,16 @@
     font-size: 16px !important;
   }
 }
-
+.picker-toolbar {
+  @media only screen and (max-width: 812px) {
+    height: 30px !important;
+  }
+}
+.mint-datetime-action {
+  @media only screen and (max-width: 812px) {
+    line-height: 30px !important;
+  }
+}
 
 // 返回
 .goBack {
@@ -764,32 +795,32 @@
   }
 }
 
-.van-button--small{
-  font-size: 0.28rem!important;
+.van-button--small {
+  font-size: 0.28rem !important;
   @media only screen and (max-width: 812px) {
-      min-width: 36px !important;
-    }
+    min-width: 36px !important;
+  }
 }
 
-.el-input{
-  color: #1b2631!important;
-  font-size: 0.36rem!important;
+.el-input {
+  color: #1b2631 !important;
+  font-size: 0.36rem !important;
 }
 
-.el-collapse-item__content{
-  height: 7.4rem!important;
-    overflow-y: auto!important;
+.el-collapse-item__content {
+  height: 7.4rem !important;
+  overflow-y: auto !important;
 }
 
 // 顶部导航固定
 .top,
-.top_row{
-  position: fixed!important;
-    top: 0;
-    left: 1.58rem;
-    right: 0;
-    z-index: 1000;
-    background: #fff;
+.top_row {
+  position: fixed !important;
+  top: 0;
+  left: 1.58rem;
+  right: 0;
+  z-index: 1000;
+  background: #fff;
 }
 // .choice,
 // .screening{
@@ -800,11 +831,9 @@
 //   left: 1.58rem;
 //   background: #fff;
 // }
-.stateBox{
-  padding-top:115px;
+.stateBox {
+  padding-top: 115px;
   background: #fff;
   min-height: calc(100vh - 2px);
   padding-left: 0.45rem;
 }
-
-