批量打印

src/xt_pages/dialysis/components/consumables.vue

@@ -42,7 +42,7 @@
         </div>
       </div>
       <div>
-        <el-button size="small" icon="el-icon-printer" @click="exportList" type="primary">导出</el-button>
+        <!-- <el-button size="small" icon="el-icon-printer" @click="exportList" type="primary">导出</el-button> -->
         <el-button size="small" type="primary" @click="statistics">统计表</el-button>
       </div>
     </div>

src/xt_pages/workforce/components/nextTableWeeks.vue

@@ -0,0 +1,416 @@
+<template>
+  <div>
+    <div class="cell clearfix" style="float: right">
+      <el-button
+        style="float: right"
+        size="small"
+        icon="el-icon-printer"
+        @click="printAction()"
+        type="primary"
+        >打印
+      </el-button>
+    </div>
+
+    <div class="cell clearfix">
+      <label class="title"> <span class="name">时间</span> : </label>
+      <div class="time">
+        <ul class>
+          <li
+            :class="item.id == week_type ? 'active' : ''"
+            @click="selectWeekType(item.id)"
+            v-for="item in weekArr"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      
+      <div  class="title"><span class="name">班 次</span> :</div>
+      <div class="time">
+        <ul class>
+          <li
+            :class="item.id == week_time ? 'active' : ''"
+            @click="selectWeekTime(item.id)"
+            v-for="item in weekTimes"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <el-table
+      :row-style="{ color: '#303133' }"
+      :data="scheduleData"
+      border
+      :header-cell-style="{
+        backgroundColor: 'rgb(245, 247, 250)',
+        color: '#606266'
+      }"
+      style="width: 100%"
+    >
+      <el-table-column label="姓名" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.patient }}
+        </template>
+      </el-table-column>
+      <el-table-column label="分区" min-width="70" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.zone.name }}
+        </template>
+      </el-table-column>
+      <el-table-column label="班次" min-width="70" align="center">
+        <template slot-scope="scope">
+          {{ getSchedulesType(scope.row.schedule_type) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="机号" min-width="70" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.number.number }}
+        </template>
+      </el-table-column>
+      <el-table-column label="透析模式" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.mode_id && modeOptions[scope.row.mode_id]
+              ? modeOptions[scope.row.mode_id].name
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="透析器" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.prescription.dialyzer_perfusion_apparatus }}
+        </template>
+      </el-table-column>
+      <el-table-column label="抗凝剂" min-width="100" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.prescription.anticoagulant === 1">无肝素</span>
+          <span v-if="scope.row.prescription.anticoagulant === 2"
+            >普通肝素</span
+          >
+          <span v-if="scope.row.prescription.anticoagulant === 3"
+            >低分子肝素</span
+          >
+          <span v-if="scope.row.prescription.anticoagulant === 4"
+            >阿加曲班</span
+          >
+          <span v-if="scope.row.prescription.anticoagulant === 5"
+            >枸橼酸钠</span
+          >
+          <span v-if="scope.row.prescription.anticoagulant === 6"
+            >低分子肝素钙</span
+          >
+          <span v-if="scope.row.prescription.anticoagulant === 7"
+            >低分子肝素钠</span
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="总量" min-width="100" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.prescription.anticoagulant == 1">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "mg"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 2">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "iu"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 3">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "iu"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 4">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "mg"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 5">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "mg"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 6">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "iu"
+              : ""
+          }}</span>
+          <span v-if="scope.row.prescription.anticoagulant == 7">{{
+            scope.row.prescription.anticoagulant_zongliang
+              ? scope.row.prescription.anticoagulant_zongliang + "iu"
+              : ""
+          }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="长期医嘱" min-width="440" align="center">
+        <template slot-scope="scope">
+          <span style="white-space: pre">{{
+            getAdvice(scope.row.doctor_advice)
+          }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getNextScheduleWeekDay } from "@/api/schedule";
+import WeekItem from "./WeekItem";
+const moment = require('moment')
+export default {
+  name: "tableWeeks",
+  props: {
+    weekTime: {
+      type: String,
+      default: "thisWeek"
+    }
+  },
+
+  data() {
+    return {
+      weekArr: [
+        { id: 1, name: "周一" },
+        { id: 2, name: "周二" },
+        { id: 3, name: "周三" },
+        { id: 4, name: "周四" },
+        { id: 5, name: "周五" },
+        { id: 6, name: "周六" },
+        { id: 7, name: "周日" }
+      ],
+      anticoagulants_confit: null,
+
+      week_type: "1",
+      week_time:0,
+      weekTimes:[
+        {id:0,name:"全部"},
+        {id:1,name:"上午"},
+        {id:2,name:"下午"},
+        {id:3,name:"晚上"},
+      ],
+      weekTitle: ["", "", "", "", "", "", ""],
+      weekData: {
+        Monday: [],
+        Tuesday: [],
+        Wednesday: [],
+        Thursday: [],
+        Friday: [],
+        Saturday: [],
+        Sunday: []
+      },
+      scheduleData: [],
+      modeOptions: null
+    };
+  },
+  watch: {
+  
+    weekTime: function() {
+      
+      var theType = this.weekType(this.weekTime);
+      this.getSchedules(theType);
+    }
+  },
+
+  methods: {
+    printAction() {
+      this.$router.push({
+        path: "/schedule/remind/print/next?week_type=" + this.week_type+"&week_time="+this.week_time
+      });
+    },
+    getNextScheduleWeekDay() {
+        const params = {
+          start_time:moment().week(moment().week() + 1).startOf('week').unix(),
+          end_time:moment().week(moment().week() + 1).endOf('week').unix(),
+          week_type:this.week_type,
+          week_time:this.week_time,
+        }
+      
+      getNextScheduleWeekDay(params).then(response => {
+        this.scheduleData = [];
+        if (response.data.state == 1) {
+          this.scheduleData = response.data.data.schedule;
+          console.log("下周数据",response.data.data.schedule)
+         
+        } else {
+          this.$message.error("网络错误");
+          return false;
+        }
+      });
+    },
+
+    weekType(weekTime) {
+      var theType = 2;
+      switch (weekTime) {
+        case "lastWeek":
+          theType = 1;
+          break;
+        case "thisWeek":
+          theType = 2;
+          break;
+        case "nextWeek":
+          theType = 3;
+          break;
+        case "nextTwoWeek":
+          theType = 4;
+          break;
+        default:
+          theType = 2;
+          break;
+      }
+      return theType;
+    },
+    weekPath(week) {
+      var weekArr = {
+        1: "Monday",
+        2: "Tuesday",
+        3: "Wednesday",
+        4: "Thursday",
+        5: "Friday",
+        6: "Saturday",
+        7: "Sunday"
+      };
+      if (typeof weekArr[week] == "undefined") {
+        return "";
+      }
+      return weekArr[week];
+    },
+    selectWeekType(type) {
+      this.week_type = type;
+      // let params = {
+      //   week_type: this.week_type
+      // };
+      this.getNextScheduleWeekDay();
+    },
+    selectWeekTime(type){
+       this.week_time = type
+       this.getNextScheduleWeekDay()
+    },
+
+    getSchedulesType: function(type) {
+      let type_name = "";
+      switch (type) {
+        case 1:
+          type_name = "上午";
+          break;
+        case 2:
+          type_name = "下午";
+          break;
+        case 3:
+          type_name = "晚上";
+          break;
+      }
+      return type_name;
+    },
+    getAdvice: function(doctor_advice) {
+      if (doctor_advice != null) {
+        let name = "";
+        for (let i = 0; i < doctor_advice.length; i++) {
+          let prescribing_number = "";
+          let single_dose = "";
+          let drug_spec = "";
+
+          if (doctor_advice[i].prescribing_number > 0) {
+            prescribing_number =
+              doctor_advice[i].prescribing_number +
+              doctor_advice[i].prescribing_number_unit;
+          }
+          if (doctor_advice[i].single_dose > 0) {
+            single_dose =
+              " 单次用量 " +
+              doctor_advice[i].single_dose +
+              doctor_advice[i].single_dose_unit;
+          }
+
+          if (doctor_advice[i].drug_spec > 0) {
+            drug_spec =
+              doctor_advice[i].drug_spec + doctor_advice[i].drug_spec_unit;
+          }
+
+          name =
+            name +
+            doctor_advice[i].advice_name +
+            " " +
+            drug_spec +
+            " " +
+            prescribing_number +
+            " " +
+            single_dose +
+            " " +
+            doctor_advice[i].delivery_way +
+            " " +
+            doctor_advice[i].execution_frequency +
+            " " +
+            doctor_advice[i].remark +
+            "\n";
+
+          if (doctor_advice[i].child.length > 0) {
+            for (let a = 0; a < doctor_advice[i].child.length; a++) {
+              if (doctor_advice[i].child[a].prescribing_number > 0) {
+                doctor_advice[i].child[a]["presc"] =
+                  doctor_advice[i].child[a].prescribing_number +
+                  doctor_advice[i].child[a].prescribing_number_unit;
+              } else {
+                doctor_advice[i].child[a]["presc"] = "";
+              }
+
+              if (doctor_advice[i].child[a].single_dose > 0) {
+                doctor_advice[i].child[a]["single"] =
+                  " " +
+                  " 单次用量 " +
+                  " " +
+                  doctor_advice[i].child[a].single_dose +
+                  doctor_advice[i].child[a].single_dose_unit;
+              } else {
+                doctor_advice[i].child[a]["single"] = "";
+              }
+
+              name =
+                name +
+                "▲" +
+                doctor_advice[i].child[a].advice_name +
+                "" +
+                doctor_advice[i].child[a].advice_desc +
+                doctor_advice[i].child[a].drug_spec_unit +
+                doctor_advice[i].child[a].presc +
+                doctor_advice[i].child[a].single +
+                "\n";
+            }
+          }
+        }
+        return name;
+      }
+    }
+  },
+  components: {
+    WeekItem
+  },
+  created() {
+    this.modeOptions = this.$store.getters.treatment_mode;
+    this.anticoagulants_confit = this.$store.getters.anticoagulants_confit;
+    console.log("抗凝机", this.anticoagulants_confit);
+    this.week_type = new Date().getDay();
+    if (this.week_type == 0) {
+      this.week_type = 7;
+    }
+    this.getNextScheduleWeekDay();
+  }
+};
+</script>
+
+<style rel="stylesheet/css" lang="scss">
+.el-table td,
+.el-table th.is-leaf,
+.el-table--border,
+.el-table--group {
+  border-color: #d0d3da;
+}
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background-color: #d0d3da;
+}
+</style>

src/xt_pages/workforce/next_remind_print.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+      <el-row style="float:right;">
+        <el-col :span="24">
+          <el-button
+            size="small"
+            icon="el-icon-printer"
+            type="primary"
+            @click="printAction"
+            >打印</el-button
+          >
+        </el-col>
+      </el-row>
+    </div>
+    <div class="app-container" style="background-color: white;">
+      <div id="print_content">
+        <div class="print_main_content">
+          <div class="order_title_panl">
+            <span class="main_title">{{day}}排班提醒（{{ currentDate }}）</span>
+          </div>
+          <div class="table_panel">
+            <table class="table">
+              <thead>
+                <tr>
+                  <!-- <td :width="td_1_width">姓名</td>
+                  <td :width="td_1_width">分区</td>
+                  <td :width="td_1_width">班次</td>
+                  <td :width="td_1_width">机号</td>
+                  <td :width="td_1_width">透析模式</td>
+                  <td :width="td_2_width">透析器</td>
+                  <td :width="td_2_width">抗凝剂</td>
+                  <td :width="td_2_width">低分子肝素</td>
+                  <td :width="td_4_width">长期医嘱</td> -->
+                  <td width="100">姓名</td>
+                  <td width="70">分区</td>
+                  <td width="70">班次</td>
+                  <td width="70">机号</td>
+                  <td width="120">透析模式</td>
+                  <td width="100">透析器</td>
+                  <td width="120">抗凝剂</td>
+                  <td width="100">总量</td>
+                  <td width="300">长期医嘱</td>
+                </tr>
+              </thead>
+              <tbody>
+              <tr v-for="(main_collection, index) in scheduleData" :key="index">
+                <td :width="td_1_width">{{ main_collection.patient}}</td>
+                <td :width="td_1_width">{{ main_collection.zone.name }}</td>
+                <td :width="td_1_width">
+                  {{getSchedulesType(main_collection.schedule_type)}}
+                </td>
+                <td :width="td_1_width">
+                  {{main_collection.number.number}}
+
+                </td>
+                <td :width="td_1_width">
+                  {{modeOptions[main_collection.mode_id].name}}
+                </td>
+                <td :width="td_1_width">
+                  {{main_collection.prescription.dialyzer_perfusion_apparatus}}
+
+
+                </td>
+                <td :width="td_1_width">
+                  {{ main_collection.prescription.anticoagulant ? anticoagulants_confit[main_collection.prescription.anticoagulant].name : ''}}
+
+                </td>
+                <td :width="td_1_width">
+                  <span v-if="main_collection.prescription.anticoagulant == 1">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'mg':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 2">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'iu':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 3">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'iu':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 4">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'mg':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 5">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'mg':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 6">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'iu':''}}</span>
+                  <span v-if="main_collection.prescription.anticoagulant == 7">{{main_collection.prescription.anticoagulant_zongliang?main_collection.prescription.anticoagulant_zongliang+'iu':''}}</span>
+                </td>
+                <td :width="td_4_width" style="text-align:left" >
+                  <span style="white-space: pre">{{getAdvice(main_collection.doctor_advice)}}</span>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getNextScheduleWeekDay } from '@/api/schedule'
+  import { parseTime } from '@/utils'
+  import BreadCrumb from '@/xt_pages/components/bread-crumb'
+  import print from 'print-js'
+  const moment = require('moment') 
+  export default {
+    name: 'SchedulePrint',
+    data() {
+      return {
+        crumbs: [
+          { path: false, name: '排班提醒' },
+          { path: false, name: '排班提醒打印' }
+        ],
+        scheduleData:[],
+        week_type: 0,
+        day:'',
+        td_1_width: '10%',
+        td_2_width: '10%',
+        td_3_width: '25%',
+        td_4_width: '45%',
+        modeOptions: null,
+        anticoagulants_confit:null,
+        currentDate:'',
+        start_time:moment().week(moment().week() + 1).startOf('week').unix(),
+        end_time:moment().week(moment().week() + 1).endOf('week').unix(),
+      }
+    },
+    components: {
+      BreadCrumb
+    },
+    created() {
+     this.currentDate = this.getCurrentDate()
+      this.modeOptions = this.$store.getters.treatment_mode
+      this.anticoagulants_confit = this.$store.getters.anticoagulants_confit
+      this.week_type = this.$route.query.week_type
+      this.week_time  = this.$route.query.week_time
+      
+      const params = {
+          week_type:this.week_type,
+          week_time:this.week_time,
+          start_time:this.start_time,
+          end_time:this.end_time,
+        }
+      console.log("打印下周",params)
+      getNextScheduleWeekDay(params).then(rs => {
+        var resp = rs.data
+        console.log(resp)
+        if (resp.state == 1) {
+          this.scheduleData = resp.data.schedule
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+    methods: {
+      getAdvice:function(doctor_advice) {
+        if (doctor_advice != null) {
+
+        let name = ""
+        for (let i = 0; i< doctor_advice.length; i++) {
+
+          let prescribing_number = ''
+          let single_dose = ''
+          let drug_spec = ''
+
+          if (doctor_advice[i].prescribing_number > 0) {
+            prescribing_number = doctor_advice[i].prescribing_number + doctor_advice[i].prescribing_number_unit
+          }
+          if (doctor_advice[i].single_dose > 0) {
+            single_dose = ' 单次用量 ' + doctor_advice[i].single_dose + doctor_advice[i].single_dose_unit
+          }
+
+          if (doctor_advice[i].drug_spec > 0) {
+            drug_spec = doctor_advice[i].drug_spec + doctor_advice[i].drug_spec_unit
+          }
+
+          name = name + doctor_advice[i].advice_name + " " + drug_spec + " " + prescribing_number + " " + single_dose + " " + doctor_advice[i].delivery_way + " " + doctor_advice[i].execution_frequency + " " + doctor_advice[i].remark + "\n"
+
+          if (doctor_advice[i].child.length > 0) {
+
+            for (let a = 0; a < doctor_advice[i].child.length; a++) {
+
+              if (doctor_advice[i].child[a].prescribing_number > 0) {
+                doctor_advice[i].child[a]['presc'] = doctor_advice[i].child[a].prescribing_number + doctor_advice[i].child[a].prescribing_number_unit
+              } else {
+                doctor_advice[i].child[a]['presc'] = ''
+              }
+
+              if (doctor_advice[i].child[a].single_dose > 0) {
+                doctor_advice[i].child[a]['single'] = " " + ' 单次用量 ' + " " + doctor_advice[i].child[a].single_dose + doctor_advice[i].child[a].single_dose_unit
+              } else {
+                doctor_advice[i].child[a]['single'] = ''
+              }
+
+              name = name + "▲" + doctor_advice[i].child[a].advice_name + ""
+                + doctor_advice[i].child[a].advice_desc
+                + doctor_advice[i].child[a].drug_spec_unit
+                + doctor_advice[i].child[a].presc
+                + doctor_advice[i].child[a].single + "\n"
+            }
+
+          }
+        }
+          return name
+
+
+        }
+
+      },
+      printAction: function() {
+        const style = '@media print { .print_main_content { background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 18px; padding: 10px 5px; } .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 16px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 15px; line-height: 20px; } .zone_name { font-weight: 500; } }'
+
+        printJS({
+          printable: 'print_content',
+          type: 'html',
+          documentTitle: '  ',
+          style: style,
+          scanStyles: false
+        })
+      }, getSchedulesType: function(type) {
+        let type_name = ''
+        switch (type) {
+          case 1:
+            type_name = '上午'
+            break
+          case 2:
+            type_name = '下午'
+            break
+          case 3:
+            type_name = '晚上'
+            break
+        }
+        return type_name
+      },
+      getCurrentDate: function () {
+        console.log(this.$route.query.week_type)
+        var myDate = new Date();
+        var year = myDate.getFullYear(); //年
+        var month = myDate.getMonth() + 1; //月
+        var day = myDate.getDate() + 7; //日
+        var newday = myDate.getDay();
+        var days = parseInt(this.$route.query.week_type);
+        var dayNum = parseInt(this.$route.query.week_type);
+        switch(days) {
+          case 1:
+            days = '星期一';
+            break;
+          case 2:
+            days = '星期二';
+            break;
+          case 3:
+            days = '星期三';
+            break;
+          case 4:
+            days = '星期四';
+            break;
+          case 5:
+            days = '星期五';
+            break;
+          case 6:
+            days = '星期六';
+            break;
+          case 7:
+            days = '星期日';
+            break;
+        }
+        if(newday > dayNum){
+          let lastDay = day - (newday - dayNum)
+          console.log("lastDay1",lastDay)
+          var str = year + "年" + month + "月" + lastDay + "日  " + days;
+          return str;
+        }else if(newday < dayNum){
+          let lastDay = day + (dayNum - newday)
+          console.log("lastDay2",lastDay)
+          var str = year + "年" + month + "月" + lastDay + "日  " + days;
+          return str;
+        }else{
+          var str = year + "年" + month + "月" + day + "日  " + days;
+          return str;
+        }
+        
+        
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.print_main_content {
+  background-color: white;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 0 0 20px 0;
+
+  .order_title_panl {
+    text-align: center;
+
+    .main_title {
+      font-size: 18px;
+      line-height: 40px;
+      font-weight: 500;
+    }
+  }
+  .table_panel {
+    .table {
+      width: 100%;
+      border: 1px solid;
+      border-collapse: collapse;
+      padding: 2px;
+
+      thead {
+        tr {
+          td {
+            border: 1px solid;
+            text-align: center;
+            font-size: 20px;
+            padding: 15px 5px;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            border: 1px solid;
+            text-align: center;
+            font-size: 18px;
+            padding: 10px 5px;
+
+            .proj {
+              padding: 5px 0;
+              text-align: left;
+
+              .proj_title {
+                font-size: 16px;
+                font-weight: 500;
+                line-height: 25px;
+              }
+
+              .proj_item {
+                font-size: 15px;
+                line-height: 20px;
+
+                .zone_name {
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>