apply-clients 6.0.3 → 6.0.4

package/src/components/build/Install/Process/CustomerFile.vue

@@ -1,423 +1,423 @@
-<template>
-  <div class="form-group col-sm-12"
-       style="background-color: #FFFFFF;height: auto;min-height:500px;border-radius: 8px">
-    <div style="position: relative;height: 40px;width:70%;margin: 30px auto;">
-      <div class="inpGroup">
-        <input v-model="tempremarks" class="inp" placeholder="文件说明"/>
-      </div>
-      <!--<div class="inp_button" type="button" @click="upload()">拍照</div>-->
-      <v-select  :is-all-line="true" :value.sync="tempusetype" placeholder="使用类型" class="inp_button2" :options="foptions"
-                v-model="tempusetype"></v-select>
-      <div class="inp_button" type="button" @click="fileUpload()">本地上传</div>
-    </div>
-    <div class="showList col-sm-12" style="padding: 20px">
-
-      <div class="col-sm-6" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
-           v-for="row in fileinfodata">
-        <div class="showData">
-          <div class="left">
-            <img :src="row.f_downloadURL"/>
-          </div>
-          <div class="right">
-            <!--<div class="top">-->
-              <!--<div class="topleft">用户ID:&nbsp;<span>{{row.f_blobid}}</span></div>-->
-              <!--<div class="topright">{{row.f_uploaddate}}</div>-->
-            <!--</div>-->
-            <div class="top">
-              <div class="topleft">使用类型:&nbsp;<span>{{row.f_usetype}}</span></div>
-            </div>
-            <div class="top">
-              <div class="topleft">操作员:&nbsp;<span>{{row.f_username}}</span></div>
-            </div>
-            <div class="text">文件说明:&nbsp;{{row.f_remarks}}</div>
-            <ul class="buttonList">
-              <li>
-                <a target="_blank" :href="row.f_downloadURL">预览</a>
-              </li>
-              <!--<li>-->
-              <!--<a :href="row.f_downloadURL" :download="row.filename">下载</a>-->
-              <!--</li>-->
-              <!--<li>修改</li>
-              <li>下载</li>-->
-              <!--<li>删除</li>-->
-            </ul>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-  <modal :show.sync="show" v-ref:modal backdrop="false">
-    <header slot="modal-header" class="modal-header">
-      <button type="button" class="close" @click="close"><span>&times;</span></button>
-      <h4 class="modal-title">文件上传</h4>
-    </header>
-    <article slot="modal-body" class="modal-body">
-      <div class="form-group">
-        <file-upload class="my-file-uploader" name="myFile33"
-                     action="rs/file/uploadFile" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>
-      </div>
-    </article>
-    <footer slot="modal-footer" class="modal-footer">
-      <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
-
-      <button v-show="show" type="button" class="btn btn-success" @click='confirm(filename)'>确认</button> -->
-    </footer>
-  </modal>
-</template>
-<script>
-
-  export default {
-    title: "附件",
-    props: ['selectdata'],
-    data() {
-      return {
-        foptions: this.$appdata.getParam('使用类型'),
-        // options:[{label: '工程材料计划', value: '工程材料计划'}, {label:'设计方案', value:'设计方案'}],
-        selectdata: {f_process_id: null},
-        model: {},
-        href: '',
-        fileinfodata: [],
-        headers: {'username': '', 'blodid': '','f_usetype':'','f_remarks':''},
-        show: false,
-        imgadd: '/images/mainicon/adddevice.png',
-        tempusetype: '',
-        tempremarks: '',
-        timeoutHandle: '',
-        username: '',
-        blodid: '',
-        host: location.host,
-        tempindex: null
-      }
-    },
-    methods: {
-      afterCamera() {
-        let data = {
-          tablename: 't_files',
-          parameters: {
-            id: res.id,
-            f_usetype: this.tempusetype[0],
-            f_remarks: this.tempremarks
-          }
-        }
-        this.tempremarks=null
-        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
-          console.log('dddddddd', this)
-          this.close()
-        })
-      },
-      GetRequest() {
-        var url = location.search;
-        var theRequest = new Object();
-        if(url.indexOf("?") != -1) {
-          var str = url.substr(1);
-          let strs = str.split("&");
-          for(var i = 0; i < strs.length; i++) {
-            theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
-          }
-        }
-        return theRequest;
-      },
-      upload() {
-        console.log(JSON.stringify(this.selectdata.f_process_id))
-        // 直接本地调用
-        // location.href=this.href
-        // 调用卡服务启动高拍仪
-        let data = {
-          f_username: this.username,
-          f_blobid: this.blodid,
-          f_usetype: this.tempusetype[0]
-        }
-        data = JSON.stringify(data)
-        this.$resetpost('Camera/'+data.toString(), {data:null}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
-          console.log("调用卡服务启动高拍仪成功")
-        })
-      },
-      load(self) {
-        if (!self.selectdata)
-          return
-        let data = {
-          tablename: 't_files',
-          condition: 'f_blobid=\'' + self.selectdata.f_process_id + '\''
-        }
-        self.$resetpost('rs/sql/singleTable', {data: data}, {
-          warnMsg: null,
-          resolveMsg: null,
-          rejectMsg: '查询错误！',
-          type: 'json',
-          silent: true
-        })
-          .then((res) => {
-            console.log("读取请求发送成功")
-            console.log(JSON.stringify(res))
-            // 查询的数组和现在的数组‘长度’不一致就刷新
-            if (res.data.length != self.fileinfodata.length) {
-              for (var i = 0; i < res.data.length; i++) {
-                if((res.data[i].f_remarks==null&&res.data[i].f_usetype==null)){
-                  res.data.splice(i,1)
-                  i--
-                  continue
-                }
-                let temp=''
-                temp = res.data[i].f_downloadpath
-                let URL = temp.substring(temp.lastIndexOf(":\\") + 2)
-                res.data[i].f_downloadURL = "http://" + this.host + "/" + URL
-                res.data[i].f_uploaddate = self.formatdate(res.data[i].f_uploaddate)
-              }
-              self.fileinfodata = []
-              self.fileinfodata = res.data
-            }
-          })
-      },
-      // 数据库时间格式化
-      formatdate(val){
-        //45012367890123
-        //20180914151603   :    2018-09-14 15:16:03
-        if(val.length!=14)
-          return
-        let year = val.substr(0,4)
-        let month = val.substr(4,2)
-        let day = val.substr(6,2)
-        let hour = val.substr(8,2)
-        let min = val.substr(10,2)
-        let second = val.substr(12,2)
-        return year+'-'+month+'-'+day+' '+hour+':'+min+':'+second
-      },
-      // 父组件更新子组件属性
-      updateData(val) {
-        this.selectdata = val
-        this.headers.username=val.f_apply_operator
-      },
-      // 下载
-      fileDownload(id) {
-        console.log("id为" + id)
-        this.$resetget('rs/file/getfile/' + id).then((res) => {
-          console.log("下载请求发送成功")
-        })
-      },
-      // 打开文件上传对话框
-      fileUpload() {
-        if (this.tempremarks) {
-          this.show = true
-          // this.tempremarks = this.fileinfodata[index].f_remarks
-        } else {
-          this.$showMessage("请先填写文件说明")
-        }
-      },
-      // 关闭文件上传对话框
-      close() {
-        // this.show = false
-        if (this.show) {
-          this.show = false
-          // 将选的文件清空
-          let ddd = new Document()
-          ddd = this.$refs.file.$el.querySelector('input').files[0]
-          console.log("hahaha", ddd)
-          this.$refs.file.$el.querySelector('input').value = ''
-        }
-      }
-    },
-    ready() {
-      console.log("开始")
-      this.load(this)
-    },
-    watch: {
-      'selectdata'() {
-        this.headers.blodid = this.selectdata.f_process_id
-        this.load(this)
-      },
-      deep: true
-    },
-    events: {
-      onFileUpload: function (file, res) {
-        console.log("上传完毕")
-        let data = {
-          tablename: 't_files',
-          parameters: {
-            id: res.id,
-            f_usetype: this.tempusetype[0],
-            f_remarks: this.tempremarks
-          }
-        }
-        this.tempremarks=null
-        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
-          console.log('dddddddd', this)
-          this.close()
-          this.load(this)
-        })
-      }
-    }
-  }
-</script>
-<style>
-
-  *{
-    padding: 0px;
-    margin: 0px;
-  }
-
-  .inpGroup {
-    position: absolute;
-    left: 0px;
-    right: 220px;
-    height: 40px;
-    font-family: "微软雅黑";
-  }
-
-  .inp {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 0px 10px;
-    height: 40px;
-    font-size: 18px;
-    line-height: 36px;
-    color: #999999;
-    border: solid 1px #c1c1c1;
-    border-radius: 2px;
-    background: none;
-    outline: none;
-  }
-
-  .inp::-webkit-input-placeholder {
-    color: #999999;
-  }
-
-  .inp_button {
-       float: right;
-       margin-left: 10px;
-       /*    position: absolute;
-           right: 35px;
-           height: 40px;*/
-       width: 100px;
-       font-size: 18px;
-       line-height: 40px;
-       color: #ffffff;
-       text-align: center;
-       background-color: rgb(90, 180, 90);
-       border-radius: 4px;
-       cursor: pointer;
-     }
-  .inp_button2 {
-    float: right;
-    margin-left: 10px;
-    /*    position: absolute;
-        right: 35px;
-        height: 40px;*/
-    width: auto;
-    font-size: 16px;
-    line-height: 40px;
-    color: #ffffff;
-    text-align: center;
-    border-radius: 4px;
-    cursor: pointer;
-
-  }
-.inp_button2 button{
-  width: 100%;
-  height: 100%;
-}
-  .inp_button:hover {
-    background-color: rgb(80, 150, 80);
-  }
-
-  .inp_button:active {
-    font-size: 20px;
-    background-color: rgb(150, 200, 150);
-  }
-
-  .showData {
-    height: auto;
-    position: relative;
-    padding-bottom: 7px;
-    border-bottom: solid 1px #c1c1c1;
-    font-family: "微软雅黑";
-  }
-
-  .showData .left {
-    height: 120px;
-    width: 140px;
-    background-color: rgb(240, 240, 240);
-    overflow: hidden;
-    line-height: 120px;
-  }
-
-  .showData .left img {
-    width: 100%;
-    height: auto;
-  }
-
-  .showData .right {
-    position: absolute;
-    top: 0px;
-    left: 150px;
-    right: 0px;
-    height: 120px;
-  }
-
-  .showData .right .top {
-    height: 20px;
-    font-size: 14px;
-    line-height: 20px;
-    color: rgb(98, 98, 98);
-    overflow: hidden;
-  }
-
-  .showData .right .top .topleft {
-    float: left;
-    height: 20px;
-    margin-right: 15px;
-  }
-
-  .showData .right .top .topright {
-    float: right;
-    margin-left: 15px;
-  }
-
-  .showData .right .text {
-    word-wrap: break-word;
-    overflow: hidden;
-    height: 60px;
-    font-size: 14px;
-    color: #999999;
-    line-height: 30px;
-  }
-
-  .showData .right ul {
-    height: 20px;
-    padding: 0px;
-    margin: 0px;
-    font-size: 0px;
-  }
-
-  .showData .right ul li {
-    display: inline-block;
-    height: 18px;
-    list-style: none;
-    font-size: 14px;
-    line-height: 18px;
-    color: #FFFFFF;
-    background-color: #5bb85d;
-    padding: 0px 7px;
-    margin-right: 11px;
-    cursor: pointer;
-  }
-
-  .showData .right ul li:hover {
-    background-color: rgb(80, 150, 80);
-  }
-
-  .showData .right ul li:active {
-    background-color: rgb(150, 200, 150);
-  }
-
-  .showData .right ul li a {
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
-    color: #FFFFFF;
-  }
-
-  body {
-    color: black;
-  }
-</style>
+<template>
+  <div class="form-group col-sm-12"
+       style="background-color: #FFFFFF;height: auto;min-height:500px;border-radius: 8px">
+    <div style="position: relative;height: 40px;width:70%;margin: 30px auto;">
+      <div class="inpGroup">
+        <input v-model="tempremarks" class="inp" placeholder="文件说明"/>
+      </div>
+      <!--<div class="inp_button" type="button" @click="upload()">拍照</div>-->
+      <v-select  :is-all-line="true" :value.sync="tempusetype" placeholder="使用类型" class="inp_button2" :options="foptions"
+                v-model="tempusetype"></v-select>
+      <div class="inp_button" type="button" @click="fileUpload()">本地上传</div>
+    </div>
+    <div class="showList col-sm-12" style="padding: 20px">
+
+      <div class="col-sm-6" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
+           v-for="row in fileinfodata">
+        <div class="showData">
+          <div class="left">
+            <img :src="row.f_downloadURL"/>
+          </div>
+          <div class="right">
+            <!--<div class="top">-->
+              <!--<div class="topleft">用户ID:&nbsp;<span>{{row.f_blobid}}</span></div>-->
+              <!--<div class="topright">{{row.f_uploaddate}}</div>-->
+            <!--</div>-->
+            <div class="top">
+              <div class="topleft">使用类型:&nbsp;<span>{{row.f_usetype}}</span></div>
+            </div>
+            <div class="top">
+              <div class="topleft">操作员:&nbsp;<span>{{row.f_username}}</span></div>
+            </div>
+            <div class="text">文件说明:&nbsp;{{row.f_remarks}}</div>
+            <ul class="buttonList">
+              <li>
+                <a target="_blank" :href="row.f_downloadURL">预览</a>
+              </li>
+              <!--<li>-->
+              <!--<a :href="row.f_downloadURL" :download="row.filename">下载</a>-->
+              <!--</li>-->
+              <!--<li>修改</li>
+              <li>下载</li>-->
+              <!--<li>删除</li>-->
+            </ul>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <modal :show.sync="show" v-ref:modal backdrop="false">
+    <header slot="modal-header" class="modal-header">
+      <button type="button" class="close" @click="close"><span>&times;</span></button>
+      <h4 class="modal-title">文件上传</h4>
+    </header>
+    <article slot="modal-body" class="modal-body">
+      <div class="form-group">
+        <file-upload class="my-file-uploader" name="myFile33"
+                     action="rs/file/uploadFile" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>
+      </div>
+    </article>
+    <footer slot="modal-footer" class="modal-footer">
+      <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
+
+      <button v-show="show" type="button" class="btn btn-success" @click='confirm(filename)'>确认</button> -->
+    </footer>
+  </modal>
+</template>
+<script>
+
+  export default {
+    title: "附件",
+    props: ['selectdata'],
+    data() {
+      return {
+        foptions: this.$appdata.getParam('使用类型'),
+        // options:[{label: '工程材料计划', value: '工程材料计划'}, {label:'设计方案', value:'设计方案'}],
+        selectdata: {f_process_id: null},
+        model: {},
+        href: '',
+        fileinfodata: [],
+        headers: {'username': '', 'blodid': '','f_usetype':'','f_remarks':''},
+        show: false,
+        imgadd: '/images/mainicon/adddevice.png',
+        tempusetype: '',
+        tempremarks: '',
+        timeoutHandle: '',
+        username: '',
+        blodid: '',
+        host: location.host,
+        tempindex: null
+      }
+    },
+    methods: {
+      afterCamera() {
+        let data = {
+          tablename: 't_files',
+          parameters: {
+            id: res.id,
+            f_usetype: this.tempusetype[0],
+            f_remarks: this.tempremarks
+          }
+        }
+        this.tempremarks=null
+        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log('dddddddd', this)
+          this.close()
+        })
+      },
+      GetRequest() {
+        var url = location.search;
+        var theRequest = new Object();
+        if(url.indexOf("?") != -1) {
+          var str = url.substr(1);
+          let strs = str.split("&");
+          for(var i = 0; i < strs.length; i++) {
+            theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
+          }
+        }
+        return theRequest;
+      },
+      upload() {
+        console.log(JSON.stringify(this.selectdata.f_process_id))
+        // 直接本地调用
+        // location.href=this.href
+        // 调用卡服务启动高拍仪
+        let data = {
+          f_username: this.username,
+          f_blobid: this.blodid,
+          f_usetype: this.tempusetype[0]
+        }
+        data = JSON.stringify(data)
+        this.$resetpost('Camera/'+data.toString(), {data:null}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log("调用卡服务启动高拍仪成功")
+        })
+      },
+      load(self) {
+        if (!self.selectdata)
+          return
+        let data = {
+          tablename: 't_files',
+          condition: 'f_blobid=\'' + self.selectdata.f_process_id + '\''
+        }
+        self.$resetpost('rs/sql/applysingleTable', {data: data}, {
+          warnMsg: null,
+          resolveMsg: null,
+          rejectMsg: '查询错误！',
+          type: 'json',
+          silent: true
+        })
+          .then((res) => {
+            console.log("读取请求发送成功")
+            console.log(JSON.stringify(res))
+            // 查询的数组和现在的数组‘长度’不一致就刷新
+            if (res.data.length != self.fileinfodata.length) {
+              for (var i = 0; i < res.data.length; i++) {
+                if((res.data[i].f_remarks==null&&res.data[i].f_usetype==null)){
+                  res.data.splice(i,1)
+                  i--
+                  continue
+                }
+                let temp=''
+                temp = res.data[i].f_downloadpath
+                let URL = temp.substring(temp.lastIndexOf(":\\") + 2)
+                res.data[i].f_downloadURL = "http://" + this.host + "/" + URL
+                res.data[i].f_uploaddate = self.formatdate(res.data[i].f_uploaddate)
+              }
+              self.fileinfodata = []
+              self.fileinfodata = res.data
+            }
+          })
+      },
+      // 数据库时间格式化
+      formatdate(val){
+        //45012367890123
+        //20180914151603   :    2018-09-14 15:16:03
+        if(val.length!=14)
+          return
+        let year = val.substr(0,4)
+        let month = val.substr(4,2)
+        let day = val.substr(6,2)
+        let hour = val.substr(8,2)
+        let min = val.substr(10,2)
+        let second = val.substr(12,2)
+        return year+'-'+month+'-'+day+' '+hour+':'+min+':'+second
+      },
+      // 父组件更新子组件属性
+      updateData(val) {
+        this.selectdata = val
+        this.headers.username=val.f_apply_operator
+      },
+      // 下载
+      fileDownload(id) {
+        console.log("id为" + id)
+        this.$resetget('rs/file/getfile/' + id).then((res) => {
+          console.log("下载请求发送成功")
+        })
+      },
+      // 打开文件上传对话框
+      fileUpload() {
+        if (this.tempremarks) {
+          this.show = true
+          // this.tempremarks = this.fileinfodata[index].f_remarks
+        } else {
+          this.$showMessage("请先填写文件说明")
+        }
+      },
+      // 关闭文件上传对话框
+      close() {
+        // this.show = false
+        if (this.show) {
+          this.show = false
+          // 将选的文件清空
+          let ddd = new Document()
+          ddd = this.$refs.file.$el.querySelector('input').files[0]
+          console.log("hahaha", ddd)
+          this.$refs.file.$el.querySelector('input').value = ''
+        }
+      }
+    },
+    ready() {
+      console.log("开始")
+      this.load(this)
+    },
+    watch: {
+      'selectdata'() {
+        this.headers.blodid = this.selectdata.f_process_id
+        this.load(this)
+      },
+      deep: true
+    },
+    events: {
+      onFileUpload: function (file, res) {
+        console.log("上传完毕")
+        let data = {
+          tablename: 't_files',
+          parameters: {
+            id: res.id,
+            f_usetype: this.tempusetype[0],
+            f_remarks: this.tempremarks
+          }
+        }
+        this.tempremarks=null
+        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log('dddddddd', this)
+          this.close()
+          this.load(this)
+        })
+      }
+    }
+  }
+</script>
+<style>
+
+  *{
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .inpGroup {
+    position: absolute;
+    left: 0px;
+    right: 220px;
+    height: 40px;
+    font-family: "微软雅黑";
+  }
+
+  .inp {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0px 10px;
+    height: 40px;
+    font-size: 18px;
+    line-height: 36px;
+    color: #999999;
+    border: solid 1px #c1c1c1;
+    border-radius: 2px;
+    background: none;
+    outline: none;
+  }
+
+  .inp::-webkit-input-placeholder {
+    color: #999999;
+  }
+
+  .inp_button {
+       float: right;
+       margin-left: 10px;
+       /*    position: absolute;
+           right: 35px;
+           height: 40px;*/
+       width: 100px;
+       font-size: 18px;
+       line-height: 40px;
+       color: #ffffff;
+       text-align: center;
+       background-color: rgb(90, 180, 90);
+       border-radius: 4px;
+       cursor: pointer;
+     }
+  .inp_button2 {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: auto;
+    font-size: 16px;
+    line-height: 40px;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+
+  }
+.inp_button2 button{
+  width: 100%;
+  height: 100%;
+}
+  .inp_button:hover {
+    background-color: rgb(80, 150, 80);
+  }
+
+  .inp_button:active {
+    font-size: 20px;
+    background-color: rgb(150, 200, 150);
+  }
+
+  .showData {
+    height: auto;
+    position: relative;
+    padding-bottom: 7px;
+    border-bottom: solid 1px #c1c1c1;
+    font-family: "微软雅黑";
+  }
+
+  .showData .left {
+    height: 120px;
+    width: 140px;
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    line-height: 120px;
+  }
+
+  .showData .left img {
+    width: 100%;
+    height: auto;
+  }
+
+  .showData .right {
+    position: absolute;
+    top: 0px;
+    left: 150px;
+    right: 0px;
+    height: 120px;
+  }
+
+  .showData .right .top {
+    height: 20px;
+    font-size: 14px;
+    line-height: 20px;
+    color: rgb(98, 98, 98);
+    overflow: hidden;
+  }
+
+  .showData .right .top .topleft {
+    float: left;
+    height: 20px;
+    margin-right: 15px;
+  }
+
+  .showData .right .top .topright {
+    float: right;
+    margin-left: 15px;
+  }
+
+  .showData .right .text {
+    word-wrap: break-word;
+    overflow: hidden;
+    height: 60px;
+    font-size: 14px;
+    color: #999999;
+    line-height: 30px;
+  }
+
+  .showData .right ul {
+    height: 20px;
+    padding: 0px;
+    margin: 0px;
+    font-size: 0px;
+  }
+
+  .showData .right ul li {
+    display: inline-block;
+    height: 18px;
+    list-style: none;
+    font-size: 14px;
+    line-height: 18px;
+    color: #FFFFFF;
+    background-color: #5bb85d;
+    padding: 0px 7px;
+    margin-right: 11px;
+    cursor: pointer;
+  }
+
+  .showData .right ul li:hover {
+    background-color: rgb(80, 150, 80);
+  }
+
+  .showData .right ul li:active {
+    background-color: rgb(150, 200, 150);
+  }
+
+  .showData .right ul li a {
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: #FFFFFF;
+  }
+
+  body {
+    color: black;
+  }
+</style>