safecheck-client 3.1.1-gaomi-5 → 4.0.1

package/src/components/pc/CheckHandPlanAllList.vue

@@ -0,0 +1,1246 @@
+<template>
+  <div class="basic-main" style="height: 100%">
+    <div>
+      <criteria-paged :model="model" v-ref:paged>
+        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
+          <validator name='v' partial>
+            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
+              <div class="row">
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">用户编号</label>
+                  <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
+                         placeholder='用户编号'
+                         condition="f_userinfo_code = '{}'">
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">&nbsp;公&nbsp;&nbsp;&nbsp;&nbsp;司&nbsp;</label>
+                  <right-tree :userid.sync='$parent.$parent.userid' style="width: 60%;"
+                              :source.sync='$parent.$parent.source' @re-res="$parent.$parent.getRes" ></right-tree>
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">用户姓名</label>
+                  <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
+                         placeholder='用户姓名'
+                         condition="f_user_name like '%{}%'">
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">异常差值</label>
+                  <v-select id="f_difference_states" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_difference_state" class="input-font"
+                            :options='$parent.$parent.f_difference_states' placeholder='是否存在异常'
+                            close-on-select clear-button
+                            v-model="model.f_difference_state" condition="f_difference_state='{}'"></v-select>
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <div class="span" style="text-align: center;">
+                    <button class="button_search" @click="search()">查询</button>
+                    <button class="button_clear" @click="clear()">清除</button>
+                  </div>
+                  <export-excel   :data="$parent.$parent.searchData"
+                                  :field="$parent.$parent.excelHeaders"
+                                  sqlurl="api/af-safecheck/logic/exportfile" sql-name="searchCheckHandPlan"
+                                  template-name='移动抄表查看导出'></export-excel>
+                  <div class="button_spacing"
+                       :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom'
+                     :!$parent.$parent.criteriaShow}"
+                       @click="$parent.$parent.hidden()">
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="row" v-show="$parent.$parent.criteriaShow">
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">小区名称</label>
+                  <input type="text" class="input_search" style="width:60%" v-model="model.f_residential_area"
+                         placeholder='小区名称'
+                         condition="f_residential_area like '%{}%'">
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">用户地址</label>
+                  <input type="text" class="input_search" style="width:60%" v-model="model.f_address" placeholder='用户地址'
+                         condition="f_address like '%{}%'">
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">用户类型</label>
+                  <v-select id="f_user_type1" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_user_type" class="input-font"
+                            :options='$parent.$parent.user_types' placeholder='请选择用户类型'
+                            close-on-select clear-button
+                            v-model="model.f_user_type" condition="f_user_type='{}'"></v-select>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">抄表员姓名</label>
+                  <input type="text" class="input_search" style="width:60%" v-model="model.f_inputtor" placeholder='抄表员姓名'
+                         condition="f_inputtor like '%{}%'">
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">抄表类型</label>
+                  <v-select id="f_meter_read_type" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_meter_read_type" class="input-font"
+                            :options='$parent.$parent.f_meter_read_types' placeholder='请选择抄表类型'
+                            close-on-select clear-button
+                            v-model="model.f_meter_read_type" condition="f_meter_read_type='{}'"></v-select>
+                </div>
+              </div>
+
+              <div class="row" v-show="$parent.$parent.criteriaShow">
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">用气性质</label>
+                  <v-select id="f_gasproperties" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_gasproperties" class="input-font"
+                            :options='$parent.$parent.f_gaspropertiess' placeholder='请选择用气性质'
+                            close-on-select clear-button
+                            v-model="model.f_gasproperties" condition="f_gasproperties='{}'"></v-select>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">气表品牌</label>
+                  <v-select id="f_meter_brand" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_meter_brand" class="input-font"
+                            :options='$parent.$parent.f_meter_brands' placeholder='请选择气表品牌'
+                            close-on-select clear-button
+                            v-model="model.f_meter_brand" condition="f_meter_brand='{}'"></v-select>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">气表类型</label>
+                  <v-select id="f_meter_brand" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_meter_classify" class="input-font"
+                            :options='$parent.$parent.meter_classify' placeholder='请选择气表类型'
+                            close-on-select clear-button
+                            v-model="model.f_meter_classify" condition="f_meter_classify='{}'"></v-select>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">是否有效</label>
+                  <v-select id="f_state" closeOnSelect="true" search="false" valueSingle="false"
+                            :value.sync="model.f_state" class="input-font"
+                            :options='$parent.$parent.f_states' placeholder='是否有效'
+                            close-on-select clear-button
+                            v-model="model.f_state" condition="f_state='{}'"></v-select>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">开始时间</label>
+                  <datepicker
+                    class="select_list select"
+                    :value.sync="model.startdate"
+                    placeholder='开始时间' style="width: 60%"
+                    :disabled-days-of-week="[]"
+                    :format="'yyyy-MM-dd'"
+                    :show-rest-button="reset"
+                    v-model="model.startdate"
+                    condition="f_hand_date >='{} 00:00:00'">
+                  </datepicker>
+                </div>
+                <div class="col-sm-3 form-group form-input-group" style="width: 20%;">
+                  <label class="font_normal_body">结束时间</label>
+                  <datepicker
+                    :value.sync="model.enddate"
+                    placeholder='结束时间' style="width: 60%"
+                    :disabled-days-of-week="[]"
+                    :format="'yyyy-MM-dd'"
+                    :show-rest-button="reset"
+                    v-model="model.enddate"
+                    condition="f_hand_date <=  '{} 23:59:59'">
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+          </validator>
+        </criteria>
+        <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
+          <template partial='head'>
+            <tr>
+              <th>
+                <nobr>序号</nobr>
+              </th>
+              <th>
+                <nobr>用户编号</nobr>
+              </th>
+              <th>
+                <nobr>用户名称</nobr>
+              </th>
+              <th>
+                <nobr>用户电话</nobr>
+              </th>
+              <th>
+                <nobr>是否异常</nobr>
+              </th>
+              <th>
+                <nobr>是否换表</nobr>
+              </th>
+              <th>
+                <nobr>差值</nobr>
+              </th>
+              <th>
+                <nobr>差值原因备注</nobr>
+              </th>
+              <th>
+                <nobr>所属公司</nobr>
+              </th>
+              <th>
+                <nobr>抄表员</nobr>
+              </th>
+              <th>
+                <nobr>用户地址</nobr>
+              </th>
+              <th>
+                <nobr>用户类型</nobr>
+              </th>
+              <th>
+                <nobr>用气性质</nobr>
+              </th>
+              <th>
+                <nobr>表类型</nobr>
+              </th>
+              <th>
+                <nobr>气表品牌</nobr>
+              </th>
+              <th>
+                <nobr>抄表类型</nobr>
+              </th>
+              <th>
+                <nobr>本次底数</nobr>
+              </th>
+              <th>
+                <nobr>本次时间</nobr>
+              </th>
+              <th>
+                <nobr>上次底数</nobr>
+              </th>
+              <th>
+                <nobr>上次时间</nobr>
+              </th>
+              <th>
+                <nobr>与上次间隔(天)</nobr>
+              </th>
+              <th>
+                <nobr>工况瞬时</nobr>
+              </th>
+              <th>
+                <nobr>标况瞬时</nobr>
+              </th>
+              <th>
+                <nobr>温度</nobr>
+              </th>
+              <th>
+                <nobr>压力</nobr>
+              </th>
+              <th>
+                <nobr>标况累计</nobr>
+              </th>
+              <th>
+                <nobr>工况累计</nobr>
+              </th>
+              <th>
+                <nobr>上期标况累计</nobr>
+              </th>
+              <th>
+                <nobr>表剩余</nobr>
+              </th>
+              <th>
+                <nobr>上期表剩余</nobr>
+              </th>
+              <th>
+                <nobr>是否换流量计</nobr>
+              </th>
+              <th>
+                <nobr>是否有效</nobr>
+              </th>
+              <th>
+                <nobr>日均用气量</nobr>
+              </th>
+              <th>
+                <nobr>操作</nobr>
+              </th>
+              <th>
+                <nobr>备注</nobr>
+              </th>
+              <th>
+                <nobr>异常差值得出方法</nobr>
+              </th>
+            </tr>
+          </template>
+          <template partial='body'>
+            <tr>
+              <td style="text-align:center">{{ $index + 1 }}</td>
+              <td style="text-align:center">{{ row.f_userinfo_code }}</td>
+              <td style="text-align:center">{{ row.f_user_name }}</td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_user_phone }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_difference_state }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_is_change_table }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{row.f_meter_classify=='物联网表'?0:row.f_difference_value}}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>
+                  <button @click="$parent.$parent.$parent.reason(row,'model')" class="btn btn-link">{{ row.f_reason_remake ? row.f_reason_remake : '备注'}}</button>
+                </nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_filiale }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_inputtor }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_address }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_user_type }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_gasproperties }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_meter_classify }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_meter_brand }}</nobr>
+              </td>
+               <td style="text-align:center">
+                <nobr>{{ row.f_meter_read_type }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_tablebase }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_hand_date }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ (row.f_last_tablebase)?row.f_last_tablebase:0 }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ (row.f_last_hand_date)?row.f_last_hand_date:'暂无' }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_lastdate_to_days }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_working_instant }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_standard_instant }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_temperature }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_pressure }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_standard_total }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_flow_working_total }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_last_flow_standard_total }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_surplus_gas }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_last_surplus_gas }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_is_change_flowmeter }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_state }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>{{ row.f_lastdate_average_gas_consumption_day }}</nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>
+                  <button @click="$parent.$parent.$parent.inspect(row)" class="btn btn-link">详情</button>
+                  <button @click="$parent.$parent.$parent.updState(row,'model',row.f_state == '有效'?'无效':'有效')" class="btn btn-link" v-if="row.rn == 1">{{row.f_state == '有效'?'置无效':'置有效'}}</button>
+                </nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>
+                  {{row.f_remake}}
+                </nobr>
+              </td>
+              <td style="text-align:center">
+                <nobr>
+                  {{row.abnormal_calculation}}
+                </nobr>
+              </td>
+            </tr>
+          </template>
+          <template partial='foot'></template>
+        </data-grid>
+      </criteria-paged>
+    </div>
+  </div>
+<!-- 民用查看详情 -->
+  <modal :show.sync="isShowItemModel" width="35%">
+    <div slot="modal-header" class="modal-header">
+      <h4 class="modal-title">
+        详情预览
+      </h4>
+    </div>
+    <div slot="modal-body" class="modal-body">
+      <div style="width: auto;padding: 5px 15px 5px 15px">
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_userinfo_code" class="font text-left">用户编号：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_userinfo_code" class="input_search"
+                   v-model=this_item.f_userinfo_code readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label class="font text-left">用户姓名：</label>
+          </div>
+          <div class="col-xs-8">
+            <input class="input_search"
+                   v-model=this_item.f_user_name readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label class="font text-left">用户地址：</label>
+          </div>
+          <div class="col-xs-8">
+            <input class="input_search"
+                   v-model=this_item.f_address readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_housing" class="font text-left">用户电话：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_housing" class="input_search"
+                   v-model="this_item.f_user_phone" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_meter_number" class="font text-left">表号：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_meter_number" class="input_search"
+                   v-model="this_item.f_meternumber" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_user_type" class="font text-left">用户类型：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_user_type" class="input_search"
+                   v-model="this_item.f_user_type" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_meterclassify" class="font text-left">表类型：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_meterclassify" class="input_search"
+                   v-model="this_item.f_meter_classify" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_tablebase" class="font text-left">上次抄表时间：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_tablebase" class="input_search"
+                   v-model="this_item.f_last_hand_date" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_hand_date" class="font text-left">上次底数：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_hand_date" class="input_search" type="text"
+                   v-model="this_item.f_last_tablebase" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f1_last_surplus_gas" class="font text-left label-font">上次表剩余：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f1_last_surplus_gas" class="input_search" type="text"   readonly="readonly"
+                   v-model="this_item.f_last_surplus_gas" />
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_newhand_date2" class="font text-left" >本期底数：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_newhand_date2" class="input_search" type="number"
+                   v-model="this_item.f_tablebase " readonly="readonly"
+            />
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/guandao1.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="theRemainingAmount" class="font text-left">剩余量：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="theRemainingAmount" readonly="readonly" type="number" class="input_search"
+                   v-model="this_item.f_surplus_gas"
+            />
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f1_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">累购气量：</label>
+            <label for="f1_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">累购金额：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f1_total_gas"  type="number" class="input_search"
+                   v-model="this_item.f_total_gas_total_fee" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_difference" class="font text-left"
+                   :style="{'color':'异常'===this_item.f_difference_state? 'red': ''}">累购差值：</label>
+            <!--累购-当前表底数-剩余-->
+          </div>
+          <div class="col-xs-8">
+            <input id="f_difference" class="input_search" readonly="readonly" v-model="this_item.f_difference_value"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/baoxiuxinxi1.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_difference" class="font text-left" >备注：</label>
+          </div>
+          <div class="col-xs-8">
+            <textarea v-model="this_item.f_remake" rows="2" class="input_textarea" readonly="readonly"></textarea>
+          </div>
+        </div>
+
+<!--        <div class="form-group col-sm-12" :class="style__">
+          <label class="text-left font">用户签名</label>
+          <div class="auto">
+            <div class="panel">
+              <div class="panel-body panel-self"
+                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                  <div class="col-sm-4">
+                    <img :class="style__" :src=`/rs/image/file/${this_item.f_sign_path_name}`
+                         @click="open_p(this_item.f_sign_path_name)" :width="200" :height="150" alt="签名"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>-->
+
+        <div class="form-group col-md-12 col-sm-12 col-xs-12">
+          <label class="text-left font">用户表底数照片：</label>
+          <div class="auto">
+            <div class="panel" style="padding: 10px 10px 5px 10px;">
+              <div class="panel-body panel-self"
+                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                    <div class="col-sm-4" style="margin-bottom: 35px" v-for="(index,img) in commaCutIntoArray(this_item.f_meter_path_name)">
+                      <img :src=`/rs/image/file/${img}` alt="用户表底数照片" width="150" height="200"
+                           @click="open_p()"/>
+                    </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="modal-footer" class="modal-footer">
+      <button type="button" class="btn btn-default" @click="showItemModelClose">关闭</button>
+    </div>
+  </modal>
+<!-- 非民用查看详情   -->
+  <modal :show.sync="isShowItemNoncivilModel" width="35%">
+    <div slot="modal-header" class="modal-header">
+      <h4 class="modal-title">
+        详情预览
+      </h4>
+    </div>
+    <div slot="modal-body" class="modal-body">
+      <div style="width: auto;padding: 5px 15px 5px 15px">
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_userinfo_code1" class=" font text-left label-font">用户编号：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_userinfo_code1" class="input_search"
+                   v-model=this_item.f_userinfo_code readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label class="font text-left label-font">用户姓名：</label>
+          </div>
+          <div class="col-xs-8">
+            <input class="input_search"
+                   v-model=this_item.f_user_name readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/详细住址.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label class="font text-left label-font">用户地址：</label>
+          </div>
+          <div class="col-xs-8">
+            <input class="input_search"
+                   v-model=this_item.f_address readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户电话.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_housing1" class="font text-left label-font">用户电话：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_housing1" class="input_search"
+                   v-model="this_item.f_user_phone" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_meter_number1" class="font text-left label-font">表号：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_meter_number1" class="input_search"
+                   v-model="this_item.f_meternumber" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_user_type2" class="font text-left label-font">用户类型：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_user_type2"  class="input_search"
+                   v-model="this_item.f_user_type" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/表类型.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_meterclassify1" class="font text-left label-font">表类型：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_meterclassify1" class="input_search"
+                   v-model="this_item.f_meter_classify" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_tablebase2" class="font text-left label-font">上期时间：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_tablebase2" class="input_search"
+                   v-model="this_item.f_last_hand_date" readonly="readonly"/>
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_hand_date1" class="font text-left label-font">上期底数：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_hand_date1" class="input_search" type="text"
+                   v-model="this_item.f_last_tablebase" readonly="readonly"/>
+          </div>
+        </div>
+
+        <!--工商业新加上期字段 -->
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_flow_standard_total" class="font text-left label-font">上期标况累计：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_flow_standard_total" class="input_search" type="text"   readonly="readonly"
+                   v-model="this_item.f_last_flow_standard_total" />
+          </div>
+        </div>
+
+        <div class="row app-row">
+          <div class="col-xs-4">
+            <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
+            <label for="f_last_surplus_gas" class="font text-left label-font">上期表剩余：</label>
+          </div>
+          <div class="col-xs-8">
+            <input id="f_last_surplus_gas" class="input_search" type="text"   readonly="readonly"
+                   v-model="this_item.f_last_surplus_gas" />
+          </div>
+        </div>
+
+        <div class="row bg-info">
+          <label class="font text-left label-font">流量计信息</label>
+          <div class="row">
+            <!-- 工商本期新加字段    -->
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/压力.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_pressure1" class="font text-left label-font">压力：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_pressure1" class="input_search" type="text" readonly="readonly"
+                       v-model="this_item.f_flow_pressure" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/温度.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_temperature" class="font text-left label-font">温度：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_temperature" class="input_search" type="text" readonly="readonly"
+                       v-model="this_item.f_flow_temperature" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_standard_instant" class="font text-left label-font">标况瞬时：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_standard_instant" class="input_search" type="text"   readonly="readonly"
+                       v-model="this_item.f_flow_standard_instant" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_standard_total1" class="font text-left label-font">标况累计：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_standard_total1" class="input_search" type="text"  readonly="readonly"
+                       v-model="this_item.f_flow_standard_total" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_standard_instant" class="font text-left label-font">工况瞬时：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_working_instant" class="input_search" type="text"  readonly="readonly"
+                       v-model="this_item.f_flow_working_instant" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_standard_total1" class="font text-left label-font">工况累计：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_working_total" class="input_search" type="text"   readonly="readonly"
+                       v-model="this_item.f_flow_working_total" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_newhand_date" class="font text-left label-font">流量计底数：</label>
+              </div>
+              <div class="col-xs-8"> <!--工商业的本期底数就是剩余气量-->
+                <input id="f_newhand_date" class="input_search" type="number" placeholder="请输入流量计底数"
+                       v-model="this_item.f_tablebase " readonly="readonly"
+                />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f1_surplus_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">表剩余气量：</label>
+                <label for="f1_surplus_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">表剩余金额：</label>
+              </div>
+              <div class="col-xs-8"> <!--工商业的剩余气量-->
+                <input id="f1_surplus_gas" class="input_search" type="number"
+                       v-model="this_item.f_surplus_gas"  readonly="readonly"
+                />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">累购气量：</label>
+                <label for="f_total_gas" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">累购金额：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_total_gas"  type="number" class="input_search"
+                       v-model="this_item.f_total_gas_total_fee" readonly="readonly"/>
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <!--  计算得出的期间用气量      -->
+                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_flow_gas_consumption" class="font text-left label-font" v-if="this_item.f_meter_classify != '物联网表'">期间用气金额：</label>
+                <label for="f_flow_gas_consumption" class="font text-left label-font" v-if="this_item.f_meter_classify == '物联网表'">期间用气量：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_flow_gas_consumption" class="input_search" type="text"  readonly="readonly"
+                       v-model="this_item.f_flow_gas_consumption" />
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <!--  表期间扣减量      -->
+                <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="thisPeriodFlowDeduction" class="font text-left label-font">表期间扣减量：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="thisPeriodFlowDeduction" class="input_search" type="text" readonly="readonly"
+                       v-model="this_item.f_flow_deduction" />
+              </div>
+            </div>
+
+            <div class="row app-row" v-if="item.f_meter_classify == '物联网表'">
+              <div class="col-xs-4">
+                <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_difference1" class="font text-left label-font" :style="{'color':this_item.f_difference_state=='异常'?'red':''}">差值：</label>
+              </div>
+              <div class="col-xs-8">
+                <input id="f_difference1" class="input_search" readonly="readonly" v-model="this_item.f_difference_value"/>
+              </div>
+            </div>
+
+            <div class="row app-row">
+              <div class="col-xs-4">
+                <img src="../../assets/baoxiuxinxi1.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <label for="f_difference" class="font text-left" >备注：</label>
+              </div>
+              <div class="col-xs-8">
+                <textarea v-model="this_item.f_remake" rows="2" class="input_textarea" readonly="readonly"></textarea>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+<!--        <div class="form-group col-sm-12" :class="style__">
+          <label class="text-left font">用户签名</label>
+          <div class="auto">
+            <div class="panel">
+              <div class="panel-body panel-self"
+                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                  <div class="col-sm-4">
+                    <img :class="style__" :src=`/rs/image/file/${this_item.f_sign_path_name}`
+                         @click="open_p(this_item.f_sign_path_name)" :width="200" :height="150" alt="签名"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>-->
+
+        <div class="form-group col-md-12 col-sm-12 col-xs-12">
+          <label class="text-left font">用户表底数照片：</label>
+          <div class="auto">
+            <div class="panel" style="padding: 10px 10px 5px 10px;">
+              <div class="panel-body panel-self"
+                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
+                <div class="row" style="height: 240px;overflow: scroll;top: 1px">
+                  <div class="col-sm-4" style="margin-bottom: 35px" v-for="(index,img) in commaCutIntoArray(this_item.f_meter_path_name)">
+                    <img :src=`/rs/image/file/${img}` alt="用户表底数照片" width="150" height="200"
+                         @click="open_p()"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div slot="modal-footer" class="modal-footer">
+      <button type="button" class="btn btn-default" @click="isShowItemNoncivilModelClonse">确认</button>
+    </div>
+  </modal>
+<!--置为无效-->
+  <modal :show.sync="updateStateModel" width="35%">
+    <div slot="modal-header" class="modal-header">
+      <h4 class="modal-title">
+        修改抄表单状态
+      </h4>
+    </div>
+    <div slot="modal-body" class="modal-body">
+      <div  class="row">
+        <div class="col-sm-12">
+          <label class="font_normal_body">置{{ updateState }}原因</label>
+          <textarea v-model="updateStateReason" rows="2" class="input_textarea" style="width: 80%" class="form-control" ></textarea>
+        </div>
+      </div>
+    </div>
+    <div slot="modal-footer" class="modal-footer">
+      <button type="button" class="btn btn-success" @click="updState(null,'update')">确认</button>
+      <button type="button" class="btn btn-default" @click="updateStateModel=false">取消</button>
+    </div>
+  </modal>
+<!--  异常差值原因-->
+  <modal :show.sync="reasonStateModel" width="35%">
+    <div slot="modal-header" class="modal-header">
+      <h4 class="modal-title">
+        填写异常差值原因
+      </h4>
+    </div>
+    <div slot="modal-body" class="modal-body">
+      <div  class="row">
+        <div class="col-sm-12">
+          <label class="font_normal_body">异常差值原因</label>
+          <textarea v-model="remakesReason" rows="2" class="input_textarea" style="width: 80%" class="form-control" ></textarea>
+        </div>
+      </div>
+    </div>
+    <div slot="modal-footer" class="modal-footer">
+      <button type="button" class="btn btn-success" @click="reason(null,'update')">确认</button>
+      <button type="button" class="btn btn-default" @click="reason(null,'cancel')">取消</button>
+    </div>
+  </modal>
+
+  <image-viewer :src='thisimgPath' :linenumber="Math.abs(thisimgPath.length/3)" :show="isShouImgs" @clone_f="clone_p" alt="隐患图片"></image-viewer>
+</template>
+
+
+<script>
+/**
+ *阶梯气价查询列表
+ */
+import {PagedList, HttpResetClass} from 'vue-client'
+import Vue from 'vue'
+
+export default {
+  title: '移动抄表查看',
+  data () {
+    return {
+      model: new PagedList('api/af-safecheck/sql/searchCheckHandPlan', 30),
+      user_types: [
+        {label: '请选择用户类型', value: ''},
+        {label: '民用', value: '民用'},
+        {label: '非民用', value: '非民用'}
+      ],
+      f_states: [
+        {label: '是否有效', value: ''},
+        {label: '有效', value: '有效'},
+        {label: '无效', value: '无效'}
+      ],
+      f_gaspropertiess: [{label:'全部',value:''},
+        {label:'工业用气',value:'工业用气'},{label:'居民用气',value:'居民用气'},
+        {label:'民用用气',value:'民用用气'},{label:'商业用气',value:'商业用气'}],
+      f_meter_brands: [{label:'全部',value:''},
+        ],
+      meter_classify: this.$appdata.getParam('气表类型'),
+      f_difference_states: [
+        {label: '是否存在异常', value: ''},
+        {label: '正常', value: '正常'},
+        {label: '异常', value: '异常'}
+      ],
+      f_meter_read_types: [{label: '全部类型',value: ''},{label: '日常抄表',value: '日常抄表'},{label: '月度抄表',value: '月度抄表'}],
+      userid: this.$login.f.id,
+      source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
+      isShowItemModel: false,
+      isShowItemNoncivilModel:false,
+      updateStateModel:false,
+      reasonStateModel:false,
+      remakesReason:'',
+      updateStateReason:'',
+      updateItem: {},
+      updateState: '无效',
+      this_item: {},
+      thisimgPath: [], //图片放大功能图片路径
+      isShouImgs: false,
+      f_filialeid_id:`('${this.$login.f.orgid}')`, //分公司id
+      criteriaShow: false,
+      excelHeaders:{
+        'f_userinfo_code': '用户编号',
+        'f_user_name': '用户姓名',
+        'f_user_phone': '用户电话',
+        'f_difference_state': '是否异常',
+        'f_difference_value': '异常差值',
+        'abnormal_calculation': '异常差值得出方法',
+        'f_address': '用户地址',
+        'f_user_type': '用户类型',
+        'f_gasproperties': '用气性质',
+        'f_meter_classify': '表类型',
+        'f_meter_brand': '气表品牌',
+        'f_tablebase': '本期抄表底数',
+        'f_hand_date': '本期抄表时间',
+        'f_last_tablebase': '上期抄表底数',
+        'f_last_hand_date': '上期抄表时间',
+        'f_reason_remake': '差值原因备注',
+        'f_filiale': '所属公司',
+        'f_inputtor': '抄表员',
+        'f_lastdate_to_days': '本次抄表距离上次抄表天数',
+        'f_lastdate_average_gas_consumption_day': '与上次抄表计算得出日均用气量',
+        'f_flow_temperature': '温度',
+        'f_flow_pressure': '压力',
+        'f_flow_working_total': '工况累计',
+        'f_flow_working_instant': '工况瞬时',
+        'f_flow_standard_total': '标况累计',
+        'f_flow_standard_instant': '标况瞬时',
+        'f_is_change_flowmeter': '是否换流量计',
+        'f_is_change_table': '是否换表',
+        'f_surplus_gas': '剩余量',
+        'f_remake': '备注'
+      },
+      searchData: {
+        condition: "1=1"
+      },
+    }
+  },
+  ready () {
+    console.log(this.$login.f)
+    this.$refs.paged.$refs.cri.model.f_state = '有效'
+    this.initMeter_brands()
+    // this.$refs.paged.$refs.cri.search()
+  },
+  methods: {
+    initMeter_brands () {
+      let http = new HttpResetClass()
+      http.load('post', '/api/af-safecheck/sql/safe_singleTable_GroupBy', {
+        'data': {
+          'items': 'f_meter_brand',
+          'tablename': 't_gasbrand',
+          'condition': '1=1',
+          'groupitem': 'f_meter_brand'
+        }
+      }, {rejectMsg: null, resolveMsg: null}).then((res) => {
+        if (res.data) {
+          this.f_meter_brands = [{label: '全部', value: ''}]
+          res.data.forEach((re) => {
+            this.f_meter_brands.push({label: re.f_meter_brand, value: re.f_meter_brand})
+          })
+        }
+      })
+    },
+    hidden(){
+      this.criteriaShow = !this.criteriaShow;
+    },
+    getRes(obj) {
+      this.f_filialeid_id = this.$login.convertToIn(obj.resids);
+    },
+    open_p (imgPath) {
+      this.isShowItemModel = false
+      this.isShowItemNoncivilModel = false
+      if (imgPath) {
+          this.thisimgPath.push({url: `/rs/image/file/${imgPath}`})
+      }else {
+        for (let item of this.commaCutIntoArray(this.this_item.f_meter_path_name)) {
+          this.thisimgPath.push({url: `/rs/image/file/${item}`})
+        }
+      }
+      this.isShouImgs = true
+    },
+    clone_p () {
+      if (this.this_item.f_user_type=='民用') {
+        this.isShowItemModel = true
+      } else {
+        this.isShowItemNoncivilModel = true
+      }
+      this.thisimgPath = []
+      this.isShouImgs = false
+    },
+    selfSearch (args) {
+      let argscondition = args.condition
+      this.searchData.condition = argscondition += ' ' + `AND f_filialeids in ${this.f_filialeid_id}`
+      args.condition += ' ' + `AND f_filialeids in ${this.f_filialeid_id}`
+      return this.model.search(args.condition, args.model)
+    },
+    inspect (row) {
+      console.log('显示详情' + JSON.stringify(row))
+      if (row.f_user_type === '民用') {
+        this.this_item =  row
+        this.isShowItemModel = true
+      } else  {
+        this.this_item =  row
+        this.isShowItemNoncivilModel = true
+      }
+    },
+
+    reason (row,isupdate) {
+      debugger
+      console.log('显示详情' + JSON.stringify(row))
+      if (isupdate=='model') {
+          this.updateItem = row
+        this.remakesReason = row.f_reason_remake
+          return this.reasonStateModel = true
+      } else if (isupdate=='update') {
+      if (!this.remakesReason) {
+        return  this.$showMessage("请填写备注")
+      }
+      let  http = new HttpResetClass()
+      let newdate = {
+        id: this.updateItem.id,
+        f_reason_remake: this.remakesReason,
+        f_update_inputtor: this.$login.f.name,
+        f_update_inputtor_id:  this.$login.f.id
+      }
+      http.load('POST',`/api/af-safecheck/logic/updateCheckHandPlanState`, {"data": newdate },
+        {resolveMsg: null, rejectMsg: null}).then((res)=>{
+        this.remakesReason = ''
+        this.updateItem = {}
+        this.reasonStateModel = false
+        this.$showMessage("备注添加成功")
+      })
+    }else if (isupdate=='cancel') {
+        this.reasonStateModel = false
+        this.remakesReason = ''
+      }
+    },
+
+     updState(row,isupdate,state) {
+      // isupdate 为model 是打开model弹框 为update是修改数据
+      if (isupdate=='model') {
+        if(!this.$login.r.includes('移动抄表维护')){
+          this.$showMessage("置无效需要【移动抄表维护】权限")
+          return;
+        } else {
+          this.updateState = state
+          this.updateItem = row
+          return this.updateStateModel = true
+        }
+      } else if (isupdate=='update') {
+        if (!this.updateStateReason) {
+          return  this.$showMessage("请填写置无效原因")
+        }
+        let  http = new HttpResetClass()
+        let newdate = {
+          id: this.updateItem.id,
+          updateStateReason: this.updateStateReason,
+          state: this.updateState,
+          f_update_inputtor: this.$login.f.name,
+          f_update_inputtor_id:  this.$login.f.id
+        }
+         http.load('POST',`/api/af-safecheck/logic/updateCheckHandPlanState`, {"data": newdate },
+          {resolveMsg: null, rejectMsg: null}).then((res)=>{
+           this.updateStateReason = ''
+           this.updateItem = {}
+           this.updateStateModel = false
+           this.updateState = "无效"
+           this.$showMessage("置为无效成功")
+        })
+      }
+
+
+
+    },
+    showItemModelClose () {
+      this.this_item = {}
+      this.isShowItemModel = false
+    },
+    isShowItemNoncivilModelClonse () {
+      this.this_item = {}
+      this.isShowItemNoncivilModel = false
+    },
+    commaCutIntoArray (f_meter_path_name) {
+      if (!f_meter_path_name) { return '';}
+      console.log(f_meter_path_name.split(","))
+      return f_meter_path_name.split(",");
+    }
+  },
+  watch: {}
+}
+</script>
+
+<style scoped>
+.td-0 {
+  border: 1px solid #000000;
+}
+
+.td-1 {
+  border: none;
+  border-top: 1px solid #000000;
+  border-left: 1px solid #000000;
+  border-right: 1px solid #000000;
+}
+
+.td-2 {
+  border: none;
+  border-left: 1px solid #000000;
+  border-right: 1px solid #000000;
+}
+
+.td-4 {
+  border: none;
+  border-top: 1px solid #000000;
+  border-left: 1px solid #000000;
+  border-right: 1px solid #000000;
+  border-bottom: 1px solid #000000;
+}
+
+.td-3 {
+  border: none;
+  border-left: 1px solid #000000;
+  border-right: 1px solid #000000;
+  border-bottom: 1px solid #000000;
+}
+</style>