Merge remote-tracking branch 'origin/demo_' into demo_

src/api/sb/info.js

@@ -419,6 +419,23 @@ export function importSbInfo (parameter) {
     data: parameter
   })
 }
+/**
+ * add batch func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function importMeasure (parameter) {
+  return axios({
+    url: '/sb/measure-logs/longYan/batch',
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    data: parameter
+  })
+}
 /**
  * add batch func
  * parameter: { }

src/router/generator-platform-routers.js

@@ -445,6 +445,10 @@ export const constantRouterMap = [
     path: '/TransformerDetailBigScreen',
     component: () => import('@/views/statisticView/TransformerDetail')
   },
+  {
+    path: '/TransformerHistoryBigScreen',
+    component: () => import('@/views/statisticView/TransformerHistory')
+  },
   {
     path: '/DayStatistics',
     component: () => import('@/views/statisticView/DayStatistics')

src/views/sb/info/SbInfo.vue

@@ -159,6 +159,9 @@
                   <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
                     <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
                   </a-popconfirm>
+                  <a-popconfirm v-if="measureStatus===1" :visible="false" @visibleChange="batchIncorrect()">
+                    <a-menu-item key="1"><my-icon type="icon-pandian" /><a>检定</a></a-menu-item>
+                  </a-popconfirm>
                 </a-menu>
                 <a-button style="margin-left: 8px">
                   批量操作 <a-icon type="down" />
@@ -195,6 +198,9 @@
                         <a-menu-item key="1">
                           <a v-if="$auth('sb-infos-edit')" @click="handleEdit(record)">修改</a>
                         </a-menu-item>
+                        <a-menu-item key="2" v-if="measureStatus===1" >
+                          <a @click="batchIncorrect(record)">检定</a>
+                        </a-menu-item>
                         <a-menu-item v-if="record.status != 2" key="2">
                           <a-popconfirm title="是否要启用该设备？" @confirm="handleStart(record)">
                             <a>启用</a>
@@ -238,6 +244,7 @@
     <print-sb-code ref="printSbCode"/>
     <print-in-sb-info-batch ref="printInSbInfoBatch" @ok="handleOk"/>
     <detail-sb-measure ref="detailSbMeasureModal" @ok="handleOk"/>
+    <base-form-measure ref="baseModalMeasure" @ok="handleOk"/>
 
   </div>
 </template>
@@ -248,6 +255,8 @@ import BaseForm from './modules/BaseForm'
 import DetailSbMeasure from '@/views/sb/measurelog/modules/DetailSbCheckBatch'
 import BaseFormStatusLog from '@/views/sb/status-log/modules/BaseForm'
 import Detail from './modules/Detail'
+import BaseFormMeasure from './modules/BaseFormMeasure'
+
 import DownloadModal from '@/views/download/DownloadModal'
 import PreviewModal from '@/views/preview/PreviewModal'
 import { getSbInfoPage, deleteSbInfos, fetchSbInfo, fetchSbInfos, exportSbInfo } from '@/api/sb/info'
@@ -276,6 +285,8 @@ export default {
     ImportFormAddStandard,
     ImportFormUpdate,
     PrintInSbInfoBatch,
+    BaseFormMeasure,
+
     BaseFormStatusLog
   },
   props: {
@@ -638,6 +649,23 @@ export default {
         modal.base([res.data])
       })
     },
+    batchIncorrect (id) {
+      let ids = []
+      if (this.BaseTool.String.isBlank(id)) {
+        const length = this.selectedRows.length
+        if (length === 0) {
+          this.$message.info('请选择要填报的设备')
+          return
+        }
+        ids = this.selectedRows
+      } else {
+        ids = [id]
+      }
+      console.log(ids)
+      this.visible = false
+      const modal = this.$refs.baseModalMeasure
+      modal.base(ids)
+    },
     handleMeasureBatch () {
       const modal = this.$refs.detailSbMeasureModal
       modal.base()

src/views/sb/info/modules/BaseFormMeasure.vue

@@ -0,0 +1,329 @@
+<template>
+  <a-card :bordered="false" v-show="visible" class="card">
+    <a-row :gutter="48" style="position:fixed;bottom:150px;z-index:999;display:flex; justify-content: center;width: 90%;">
+      <a-col :md="48" :sm="48">
+        <span>
+          <a-button type="primary" @click="save()">保存</a-button>
+          <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
+        </span>
+      </a-col>
+    </a-row>
+    <div>
+      <div class="tables">
+        <div style="text-align:center;padding-bottom:10px;font-size:32px;">时代思康巡检记录表</div>
+        <div style="display:flex; justify-content: space-between;">
+          <div> 检定人：{{ username }}</div>
+        </div>
+        <table>
+          <thead border="1px">
+            <tr>
+              <th width="100px">序号</th>
+              <th width="150px">设备名称</th>
+              <th width="150px">型号</th>
+              <th width="150px">是否是子设备</th>
+              <th width="350px">选择父设备</th>
+              <th width="150px">设备位置</th>
+              <th width="150px">检定周期</th>
+              <th width="150px">检定单号</th>
+              <th width="150px">检定日期</th>
+              <th width="150px">检定单位</th>
+              <th width="150px">备注</th>
+              <th width="150px">操作</th>
+            </tr>
+            <tr v-if="ListForm.length>0">
+              <th v-for="item in ListForm[0].content" :key="item.name">{{ item.name }}</th>
+            </tr>
+          </thead>
+          <tbody v-if="ListForm.length>0">
+            <tr v-for="(item,i) in ListForm" :key="item.id">
+              <td>{{ i+1 }}</td>
+              <td>{{ item.sbName }}</td>
+              <td>{{ item.sbModel }}</td>
+              <td>{{ item.isChild === 0?'否':'是' }}</td>
+              <td> <div v-if="item.isChild" style="width:300px">
+                     <a-input
+                       disabled
+                       style="width: 50%"
+                       v-model="item.parentSbName"/>
+                     <a-button type="primary" @click="handleSbSelect(i)">选择</a-button>
+                     <a-button type="default" @click="clearParent">清空</a-button>
+                   </div>
+                <div v-else>无</div></td>
+              <td><a-tree-select
+                style="width: 150px"
+                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+                :treeData="treeData"
+                :treeNodeFilterProp="'title'"
+                :showSearch="true"
+                v-model="item.positionId"
+                placeholder="请选择"
+              >
+              </a-tree-select></td>
+              <td><a-input v-model="item.checkPeriod" :formatter="BaseTool.Amount.formatter" :parser="BaseTool.Amount.parser"> <span slot="suffix" >月</span> </a-input></td>
+              <td><a-input style="width: 150px" v-model="item.no" /></td>
+              <td><a-date-picker
+                placeholder="日期"
+                style="width: 150px"
+                :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
+                v-model="item.lastDate" /></td>
+              <td><a-input style="width: 150px" v-model="item.requirement" /></td>
+              <td><a-input style="width: 150px" v-model="item.remark" /></td>
+              <td>
+                <a-button type="link" @click="uploadImg(item,i)">上传图片</a-button>
+                <a-button type="link" @click="uploadFile(item,i)">上传文件</a-button>
+                <a-modal v-model="uploadVisible" title="上传图片" :footer="null" @cancel="uploadVisible = false">
+                  <a-upload
+                    :action="uploadUrl"
+                    list-type="picture-card"
+                    :file-list="defaultApplicationFileList"
+                    @change="handleApplicationFileChange"
+                    @preview="handlePreview"
+                    accept="image/*"
+                    :headers="headers"
+                  >
+                    <div>
+                      <a-icon type="plus" />
+                      <div class="ant-upload-text">
+                        Upload
+                      </div>
+                    </div>
+                  </a-upload>
+                </a-modal>
+                <a-modal v-model="uploadFiledVisible" title="上传文件" :footer="null" @cancel="uploadFiledVisible = false">
+                  <a-upload
+                    :action="uploadUrl"
+                    :multiple="true"
+                    :file-list="defaultCheckFileList"
+                    @change="handleCheckFileChange"
+                    :headers="headers"
+                  >
+                    <a-button> <a-icon type="upload" /> 上传 </a-button>
+                  </a-upload>
+                </a-modal>
+                <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false" @ok="previewVisible = false">
+                  <img alt="example" style="width: 100%" :src="previewImage" />
+                </a-modal>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <sb-info-select-modal ref="sbInfoSelectModal" @selected="handleSbSelectd"/>
+
+  </a-card>
+</template>
+
+<script>
+import { getSbPositionTree } from '@/api/sb/position'
+import SbInfoSelectModal from '@/views/sb/info/modules/SbInfoSelectModal'
+import { importMeasure } from '@/api/sb/info'
+
+import { uploadUrl } from '@/api/upms/file'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { status } from 'nprogress'
+
+export default {
+  name: 'BaseFillGatherTask',
+  components: {
+    SbInfoSelectModal
+
+  },
+  data () {
+    return {
+      uploadUrl: uploadUrl,
+      defaultApplicationFileList: [],
+      defaultCheckFileList: [],
+      checkFileList: [], // 文档
+      applicationFileList: [],
+      headers: {
+        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
+      },
+      visible: false,
+      username: this.$store.getters.userInfo.username,
+      uploadVisible: false,
+      uploadFiledVisible: false,
+      previewVisible: false,
+      previewImage: '',
+      treeData: [],
+      sbParentOPt: 0,
+      model: {},
+      listPage: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      },
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      },
+      imgId: '',
+      fileId: '',
+      ListForm: [],
+      id: '',
+      updatesInfo: []
+      // 下拉框map
+    }
+  },
+  props: {
+  },
+  created () {
+    // 下拉框map
+
+  },
+  methods: {
+    base (record) {
+      this.visible = true
+
+      this.model = record
+      this.ListForm = record.map(item => {
+        const data = {
+          sbName: item.name,
+          sbModel: item.model,
+          checkPeriod: item.checkPeriod,
+          isChild: item.isChild,
+          parentSbName: item.parentSbName,
+          sbParentId: item.parentId,
+          positionId: item.positionId,
+          no: '',
+          lastDate: '',
+          requirement: '',
+          remark: '',
+          name: this.username,
+          sbId: item.id,
+          type: 1,
+          checkImgList: [],
+          checkFileList: []
+        }
+        return data
+      })
+      getSbPositionTree().then(res => {
+        this.treeData = res.data
+      })
+    },
+    clearParent () {
+
+    },
+    handleSbSelect (i) {
+      this.sbParentOPt = i
+      this.$refs.sbInfoSelectModal.base({}, { isChild: this.DictCache.VALUE.SB_IS_CHILD.IS_PARENT })
+    },
+    handleSbSelectd (keys, rows) {
+      console.log(keys, rows)
+      this.ListForm[ this.sbParentOPt ].sbParentId = keys[0]
+      this.ListForm[ this.sbParentOPt ].parentSbName = rows[0].name
+    },
+    uploadFile (val, i) {
+      this.uploadFiledVisible = true
+      this.fileId = i
+      console.log(val)
+      this.defaultCheckFileList = this.BaseTool.UPLOAD.transImg(val.checkFileList)
+    },
+    uploadImg (val, i) {
+      this.uploadVisible = true
+      console.log(val)
+      this.imgId = i
+      this.defaultApplicationFileList = this.BaseTool.UPLOAD.transImg(val.checkImgList)
+    },
+    getBase64 (file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = error => reject(error)
+      })
+    },
+    async handlePreview (file) {
+      if (!file.url && !file.preview) {
+        file.preview = await this.getBase64(file.originFileObj)
+      }
+      this.previewImage = file.url || file.preview
+      this.previewVisible = true
+    },
+    handleApplicationFileChange (info) {
+      this.defaultApplicationFileList = info.fileList
+      this.applicationFileList = this.setFileList(info, 11)
+      this.ListForm[this.imgId].checkImgList = this.applicationFileList
+    },
+    handleCheckFileChange (info) {
+      this.defaultCheckFileList = info.fileList
+      this.checkFileList = this.setFileList(info, 32)
+
+      this.ListForm[this.fileId].checkFileList = this.checkFileList
+      console.log(this.checkFileList)
+    },
+    setFileList (info, type) {
+      const file = info.file
+      const fileList = info.fileList
+      if (file.status === 'done') {
+        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
+      } else if (file.status === 'removed') {
+        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
+      } else if (file.status === 'error') {
+        this.$message.error('上传失败')
+        return []
+      }
+    },
+    save () {
+      let status = false
+
+      this.ListForm.forEach(item => {
+        switch (true) {
+          case item.no == '':
+            this.$message.warning(item.sbName + '的检定单号不能为空！')
+            status = true
+            break
+          case item.lastDate == '':
+            this.$message.warning(item.sbName + '的检定日期不能为空！')
+            status = true
+            break
+        }
+        item.lastDate = item.lastDate != '' ? this.BaseTool.Date.formatter(item.lastDate, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN) : ''
+      })
+      if (status) return
+      const params = {
+        sbMeasureLogDTOList: this.ListForm
+      }
+      importMeasure(params).then(res => {
+        this.$message.success('检定完成！')
+        this.handleCancel()
+      })
+    },
+    handleCancel () {
+      this.visible = false
+      this.ListForm = []
+      this.$emit('ok')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .tables{
+  margin: 20px 0px;
+  width: 100%;
+  overflow-x:auto;
+  table {
+        min-width:100%;
+        margin: 0 auto;
+        border: 1px solid #D6D6D6;
+        border-collapse: collapse;
+        font-size: 16px;
+        font-weight: 400;
+        table-layout:fixed;
+    }
+    th{
+      background: #fafafa;
+      font-weight: 500;
+
+    }
+    th,
+    td {
+        border: 1px solid #D6D6D6;
+        text-align: center;
+        padding: 5px 10px;
+        white-space: nowrap;
+    }
+}
+</style>

src/views/statisticView/SwitchingRoom.vue

@@ -1,28 +1,94 @@
 <template>
   <div class="view-container">
     <div class="date">
-      <span>{{ date }}</span>
+      <span>{{ date }}</span>天气： 晴
     </div>
     <div class="dateStatistics">
-      <div @click="handleDayView">日统计</div>
+      <div @click="handleDayView">日统计</div>&nbsp;&nbsp;
       <div @click="handleMonthView">月统计</div>
     </div>
     <div class="adress">
       <div class="address-opt">梅康一路</div>
+      <div>梅康二路</div>
       <div>梅康三路</div>
+      <div>梅康四路</div>
       <div>梅康五路</div>
-
     </div>
     <div class="sb">
       <a-row type="flex" justify="space-between" :gutter="[20,20]">
-        <a-col :span="6" v-for="item in 8" :key="item" @click="handleView">
+        <a-col :span="6">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>梅康一路汇总数据</span>
+            </div>
+            <div class="sb-info-content">
+              <div>
+                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
+                  <div class="tixing1">
+                    电压
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  V
+                </div>
+                <div style="display:flex;width:170px;align-items: center;padding: 15px 0;">
+                  <div class="tixing2">
+                    电流
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  A
+                </div>
+              </div>
+              <div>
+                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
+                  <div class="tixing1">
+                    有功电度
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  W
+                </div>
+                <div style="display:flex;width:175px;align-items: center;padding: 15px 0;">
+                  <div class="tixing2">
+                    无功电度
+                  </div>
+                &nbsp;&nbsp;&nbsp;
+                  <div class="sb-proportion-info">
+                    <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                    <div style="font-size: 14px;color: #BDD4FF;">
+                      1130
+                    </div>
+                  </div>&nbsp;
+                  W
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="6" v-for="item in 7" :key="item" @click="handleView">
           <div class="sb-info">
             <div class="sb-info-title">
               <span>2G04</span>
               <span>10KV联合动力2#变压器</span>
             </div>
             <div class="sb-info-content">
-              <div>低压进线V</div>
+              <div>高压</div>
               <div class="arrow">
                 <div>
                   <div>电压：32V</div>
@@ -36,6 +102,10 @@
                   <div>有功电度：34V</div>
                   <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                 </div>
+                <div style="color:rgba(248, 161, 161, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
               </div>
               <div><img src="../../assets/bgView/bianyaqi.png" width="87px" alt=""></div>
               <div class="arrow">
@@ -48,36 +118,70 @@
                   <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                 </div>
               </div>
-              <div>高压出线KV</div>
+              <div>低压</div>
             </div>
           </div>
         </a-col>
-        <a-col :span="6" v-for="item in 8" :key="item">
+        <a-col :span="6" v-for="item in 4" :key="item">
           <div class="sb-info">
             <div class="sb-info-title">
               <span>2G06</span>
               <span>10KV开山螺杆B线</span>
             </div>
             <div class="sb-info-content">
-              <div>低压进线V</div>
+              <div>高压</div>
               <div class="arrow">
                 <div>
                   <div>电压：32V</div>
                   <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
                 </div>
                 <div style="color:rgba(40, 233, 108, 1)">
-                  <div>电压：32V</div>
+                  <div>电流：32A</div>
                   <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
                 </div>
                 <div style="color:rgba(255, 216, 0, 1)">
-                  <div>电压：32V</div>
+                  <div>有功电度：34V</div>
                   <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
                 </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
               </div>
               <div><img src="../../assets/bgView/luogan.png" width="153px" alt=""></div>
             </div>
           </div>
         </a-col>
+        <a-col :span="6" v-for="item in 4" :key="item">
+          <div class="sb-info">
+            <div class="sb-info-title">
+              <span>2G06</span>
+              <span>10KV联合动力2#电压器</span>
+            </div>
+            <div class="sb-info-content">
+              <div>高压</div>
+              <div class="arrow">
+                <div>
+                  <div>电压：32V</div>
+                  <div><img src="../../assets/bgView/jiantouBlue.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(40, 233, 108, 1)">
+                  <div>电流：32A</div>
+                  <div><img src="../../assets/bgView/jiantouGreen.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>有功电度：34V</div>
+                  <div><img src="../../assets/bgView/jiantouYellow.png" width="65px" alt=""></div>
+                </div>
+                <div style="color:rgba(255, 216, 0, 1)">
+                  <div>温度：3℃</div>
+                  <div><img src="../../assets/bgView/jiantoured.png" width="65px" alt=""></div>
+                </div>
+              </div>
+              <div><img src="../../assets/bgView/dianyaqi.png" width="153px" alt=""></div>
+            </div>
+          </div>
+        </a-col>
       </a-row>
     </div>
   </div>
@@ -127,7 +231,7 @@ padding: 80px 67px;
 }
 }
 .dateStatistics{
-  width: 250px;
+  width: 300px;
   color: #FFFFFF;
   font-size: 20px;
   display: flex;
@@ -148,7 +252,7 @@ padding: 80px 67px;
   }
 }
 .date{
-  width: 250px;
+  width: 300px;
   color: #FFFFFF;
   font-size: 20px;
   display: flex;
@@ -158,7 +262,7 @@ padding: 80px 67px;
   left:96px;
 }
 .adress{
-  width: 660px;
+  width: 1000px;
   margin: 20px auto;
   font-size: 30px;
   font-weight: bold;
@@ -224,7 +328,103 @@ padding: 80px 67px;
     padding: 44px 10px 10px 7px;
     .arrow{
       font-size:12px;
+      transform:scale(.8);
     }
   }
 }
+
+.sb-proportion-info{
+   position: relative;
+   width: 66px;
+   height: 30px;
+   text-align: center;
+   font-size:12px;
+   line-height: 32px;
+   background: rgba(0, 186, 255, 0.1);
+}
+.top-left-two{
+    width: 5px;
+    height: 5px;
+    display: block;
+    border-top: 1px solid #02E8FF;
+    border-left: 1px solid #02E8FF;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+  }
+  .bottom-left-two{
+    width: 5px;
+    height: 5px;
+    display: block;
+    border-bottom: 1px solid #02E8FF;
+    border-left: 1px solid #02E8FF;
+    position: absolute;
+    bottom: -1px;;
+    left: -1px;;
+  }
+  .top-right-two{
+     width: 5px;
+    height: 5px;
+    display: block;
+    border-top: 1px solid #02E8FF;
+    border-right: 1px solid #02E8FF;
+    position: absolute;
+    top: -1px;;
+    right: -1px;;
+  }
+  .bottom-right-two {
+     width: 5px;
+    height: 5px;
+    display: block;
+   border-bottom: 1px solid #02E8FF;
+    border-right: 1px solid #02E8FF;
+    position: absolute;
+    bottom: -1px;;
+    right: -1px;;
+  }
+.tixing1 {
+    line-height: 30px;
+    text-align: center;
+    width: 72px;
+    height: 30px;
+    font-size:12px;
+    background: #00E4FF;
+    position: relative;
+    z-index: 9;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
+    &::after{
+      content:"";
+      position: absolute;
+      left: 1px;
+      top:1px;
+      width: 70px;
+      height: 28px;
+      z-index: -9;
+      background: #13154c;
+      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 80% 100%, 0% 100%);
+    }
+}
+
+.tixing2 {
+    line-height: 30px;
+    text-align: center;
+    width: 72px;
+    height: 30px;
+    font-size:12px;
+    background: #00E4FF;
+    position: relative;
+    z-index: 9;
+    clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
+    &::after{
+      content:"";
+      position: absolute;
+      left: 1px;
+      top:1px;
+      width: 70px;
+      height: 28px;
+      z-index: -9;
+      background: #13154c;
+      clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);
+    }
+}
 </style>

src/views/statisticView/TransformerDetail.vue

@@ -14,9 +14,9 @@
               <div class="sb-proportion-info">
                 <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
                 <div style="font-size: 36px;color: #BDD4FF;">
-                  {{detail.value}}
+                  {{ detail.value }}
                 </div>
-                <div> {{detail.title}}</div>
+                <div> {{ detail.title }}</div>
               </div>
             </a-col>
           </a-row>
@@ -24,45 +24,7 @@
       </div>
       <div class="history">
         <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
-        <div class="history-title">
-          <div>数据历史</div>
-          <div >
-            <span style="color:#01D4F9;font-size:30px;" >
-              {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
-            </span>
-            <a-month-picker v-model="time" :format="BaseTool.Date.PICKER_NORM_YEAR_MONTH" @change="onMonthChange" @ok="onOk">
-              <span class="month">
-                <a-icon type="calendar" theme="filled" />
-              </span>
-            </a-month-picker>&nbsp;
-            <span style="padding:0 2px ;background:#01D4F9;"></span>&nbsp;
-            <a-date-picker
-              v-model="time"
-              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
-              @change="onDateChange"
-              @ok="onOk">
-              <span class="date">
-                <a-icon type="calendar" theme="filled" />
-              </span>
-            </a-date-picker>
-          </div>
-        </div>
-        <table>
-          <thead>
-            <tr style="display: flex;justify-content: space-between;width: 100%;">
-              <th class="list-header" style="color:#fff">时间</th>
-              <th class="list-header" style="color:#fff">正向有功(kwh)</th>
-              <th class="list-header" style="color:#fff">正向无功(kwh)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="i in 24" :key="i" style="display: flex;justify-content: space-between;">
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
-              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
-            </tr>
-          </tbody>
-        </table>
+
       </div>
     </div>
   </div>
@@ -157,53 +119,6 @@ background: rgba(0, 186, 255, 0.1);
    border: 2px solid #045693;
    padding:30px;
    margin-top:30px;
-   .history-title{
-    display: flex;
-    justify-content: space-between;
-    font-size: 30px;
-    font-weight: bold;
-    margin:30px 0;
-    color: #fff;
-    .month{
-      color:#01D4F9;
-      font-size:40px;
-      position: relative;
-      &::before{
-        content:'月';
-        color:#fff;
-        font-size:16px;
-        top: 23px;
-        left: 12px;
-        bottom: 0;
-        right: 0;
-        position: absolute;
-      }
-    }
-    .date{
-      color:#01D4F9;
-      font-size:40px;
-      position: relative;
-      &::before{
-        content:'日';
-        color:#fff;
-        font-size:16px;
-        top: 23px;
-        left: 12px;
-        bottom: 0;
-        right: 0;
-        position: absolute;
-      }
-    }
-   }
-   table{
-    width: 100%;
-    tbody{
-      height: 700px;
-  overflow: hidden;
-  display: block;
-  overflow-y: auto;
-    }
-   }
    .list-header{
      margin:0;
      padding: 0;

src/views/statisticView/TransformerHistory.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="view-container">
+    <div class="title"><span>2G04</span><span>10KV联合动力2#变压器</span></div>
+    <div class="content">
+      <div class="info">
+        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
+        <div style="font-size: 40px;font-weight: bold; margin-bottom:50px;"><span style="padding-right:30px;">2G04</span><span> 变压器详细信息</span></div>
+        <div style="text-align:center;">
+          <img src="../../assets/bgView/luogan.png" width="400px" alt="">
+        </div>
+        <div style="padding-top:70px">
+          <a-row type="flex" justify="space-around" :gutter="[0,25]">
+            <a-col :span="5" v-for="(detail, index) in details" :key="index">
+              <div class="sb-proportion-info">
+                <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
+                <div style="font-size: 36px;color: #BDD4FF;">
+                  {{detail.value}}
+                </div>
+                <div> {{detail.title}}</div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+      <div class="history">
+        <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
+        <div class="history-title">
+          <div>数据历史</div>
+          <div >
+            <span style="color:#01D4F9;font-size:30px;" >
+              {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+            </span>
+            <a-month-picker v-model="time" :format="BaseTool.Date.PICKER_NORM_YEAR_MONTH" @change="onMonthChange" @ok="onOk">
+              <span class="month">
+                <a-icon type="calendar" theme="filled" />
+              </span>
+            </a-month-picker>&nbsp;
+            <span style="padding:0 2px ;background:#01D4F9;"></span>&nbsp;
+            <a-date-picker
+              v-model="time"
+              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
+              @change="onDateChange"
+              @ok="onOk">
+              <span class="date">
+                <a-icon type="calendar" theme="filled" />
+              </span>
+            </a-date-picker>
+          </div>
+        </div>
+        <table>
+          <thead>
+            <tr style="display: flex;justify-content: space-between;width: 100%;">
+              <th class="list-header" style="color:#fff">时间</th>
+              <th class="list-header" style="color:#fff">正向有功(kwh)</th>
+              <th class="list-header" style="color:#fff">正向无功(kwh)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="i in 24" :key="i" style="display: flex;justify-content: space-between;">
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
+              <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      time: '',
+      dateVisual: true,
+      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
+        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
+        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
+        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
+    }
+  },
+  methods: {
+    onDateChange (value, dateString) {
+      this.dateVisual = true
+    },
+    onMonthChange (value, dateString) {
+      this.dateVisual = false
+    },
+    onOk (value) {
+      console.log('onOk: ', value)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.view-container {
+width:1920px;
+height:1080px;
+font-family: PingFang SC;
+padding: 15px 37px;
+&::after {
+  content: "";
+  width:1920px;
+  height:1080px;
+  background: url(../../assets/bgView/TransformerDetail.png);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+}
+}
+.title{
+  display: flex;
+  justify-content: space-between;
+  width: 600px;
+  margin:0 auto;
+  font-size: 42px;
+  font-weight: bold;
+  text-shadow: 0px 2px 4px rgba(4,0,0,0.3);
+  background: linear-gradient(0deg, #BCBCBC 1.123046875%, #FFFFFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.content{
+  display: flex;
+  justify-content: space-between;
+}
+.info{
+  color:#5ACCF8;
+  width: 766px;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:30px;
+   margin-top:30px;
+   .sb-proportion-info{
+   position: relative;
+display: flex;
+flex-direction:column;
+align-items: center;
+justify-content:center;
+position: relative;
+// width: 141px;
+height: 150px;
+background: rgba(0, 186, 255, 0.1);
+   }
+}
+.history{
+  color:#A8E6F3 ;
+  width: 1041px;
+   height:950px;
+   position: relative;
+   border: 2px solid #045693;
+   padding:30px;
+   margin-top:30px;
+   .history-title{
+    display: flex;
+    justify-content: space-between;
+    font-size: 30px;
+    font-weight: bold;
+    margin:30px 0;
+    color: #fff;
+    .month{
+      color:#01D4F9;
+      font-size:40px;
+      position: relative;
+      &::before{
+        content:'月';
+        color:#fff;
+        font-size:16px;
+        top: 23px;
+        left: 12px;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+      }
+    }
+    .date{
+      color:#01D4F9;
+      font-size:40px;
+      position: relative;
+      &::before{
+        content:'日';
+        color:#fff;
+        font-size:16px;
+        top: 23px;
+        left: 12px;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+      }
+    }
+   }
+   table{
+    width: 100%;
+    tbody{
+      height: 700px;
+  overflow: hidden;
+  display: block;
+  overflow-y: auto;
+    }
+   }
+   .list-header{
+     margin:0;
+     padding: 0;
+      width: 180px;
+height: 35px;
+font-size: 16px;
+font-weight: bold;
+margin-bottom: 12px;
+
+font-family: Microsoft YaHei;
+background: rgba(2, 205, 255, 0);
+box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
+display: flex;
+justify-content: center;
+align-items: center;
+   }
+}
+.top-left{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    top: -6px;
+    left: -6px;
+  }
+  .bottom-left{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -6px;
+    left: -6px;
+  }
+  .top-right{
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+  }
+  .bottom-right {
+    width: 12px;
+    height: 12px;
+    display: block;
+    background-color: rgba(4, 8, 20, 0.8);
+    border: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -6px;
+    right: -6px;
+  }
+    .top-left-two{
+    width: 15px;
+    height: 15px;
+    display: block;
+    border-top: 2px solid #02E8FF;
+    border-left: 2px solid #02E8FF;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+  }
+  .bottom-left-two{
+    width: 15px;
+    height: 15px;
+    display: block;
+    border-bottom: 2px solid #02E8FF;
+    border-left: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -2px;;
+    left: -2px;;
+  }
+  .top-right-two{
+     width: 15px;
+    height: 15px;
+    display: block;
+    border-top: 2px solid #02E8FF;
+    border-right: 2px solid #02E8FF;
+    position: absolute;
+    top: -2px;;
+    right: -2px;;
+  }
+  .bottom-right-two {
+     width: 15px;
+    height: 15px;
+    display: block;
+   border-bottom: 2px solid #02E8FF;
+    border-right: 2px solid #02E8FF;
+    position: absolute;
+    bottom: -2px;;
+    right: -2px;;
+  }
+  ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+
+</style>