- 加入vue-pdf

- 宜昌两网加入模块

package.json

@@ -41,6 +41,7 @@
     "vue-echarts": "^4.1.0",
     "vue-json-excel": "^0.3.0",
     "vue-moment": "^4.1.0",
+    "vue-pdf": "^4.3.0",
     "vue-print-nb": "^1.7.4",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "3.0.6",

src/permission.ts

@@ -73,7 +73,7 @@ router.beforeEach(async (to, from, next) => {
           // console.log('qqqqq', to)
 
           //初始化地图资源
-          let appconfig = await store.dispatch('gis/initGISResource')
+          let appconfig = await store.dispatch('cesiumMap/initGISResource')
           console.log(appconfig)
           next({ ...to })
         } catch (error) {

src/views/pipelineDefect/analysis/dataMining/widget.vue

@@ -1,13 +1,225 @@
 <template>
-  <div>数据挖掘</div>
+  <div class="engineering-manage">
+    <!-- 管道检测数据挖掘 -->
+    <div class="releaseTop-box">
+      <!-- 左边部分 -->
+      <div class="right">
+        <!-- 地图 -->
+        <div class="map-box">
+          <simple-map @mapMoveEvent="mapMoveEvent" ref="myMap"></simple-map>
+        </div>
+      </div>
+      <!-- 右边部分 -->
+      <div class="left">
+        <div class="top-title">管道检测数据挖掘</div>
+        <el-divider></el-divider>
+        <div class="top-title flexCss">
+          <el-checkbox v-model="linkage">联动</el-checkbox>
+          <el-button type="primary" size="small" @click="getPdf('管道检测数据挖掘', 'dataming')">导出</el-button>
+        </div>
+        <el-divider></el-divider>
+        <!-- 视图列表 -->
+        <div id="dataming" class="echarts-list" v-loading="loading">
+          <div class="threeBottom">
+            <div class="threeBottom-one">
+              <echarts-two v-if="redayY" :paramData="defectTypeObj"></echarts-two>
+            </div>
+            <div class="threeBottom-two">
+              <echarts-three v-if="redayY" :paramData="defectLevel"></echarts-three>
+            </div>
+          </div>
+
+          <div class="threeBottom">
+            <div class="threeBottom-one">
+              <echarts-four v-if="redayY" :paramData="defectLevel"></echarts-four>
+            </div>
+            <div class="threeBottom-two">
+              <echarts-five v-if="redayY" :paramData="defectLevel"></echarts-five>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+<script>
+import simpleMap from '@/components/SimpleMap'
+import { getDefectDataBySE } from '../../api/pipelineDefect'
+import echartsTwo from './components/echartsTwo.vue'
+import echartsThree from './components/echartsThree.vue'
+import echartsFour from './components/echartsFour.vue'
+import echartsFive from './components/echartsFive.vue'
+
+export default {
+  props: ['data'],
+  components: { simpleMap, echartsTwo, echartsThree, echartsFour, echartsFive },
+  data() {
+    return {
+      loading: true, // 加载效果
+      redayY: false, // 数据是否已加载完毕
+      linkage: true, // 是否联动
+      defectTypeObj: {
+        funcArr: [],
+        structArr: []
+      }, // 缺陷类型统计图
+      defectLevel: [], // 其它统计图
+      mapData: {},
+      typeArr: {
+        s: ['AJ', 'BX', 'CK', 'CR', 'FS', 'PL', 'QF', 'SL', 'TJ', 'TL'],
+        f: ['CJ', 'CQ', 'FZ', 'JG', 'SG', 'ZW']
+      },
+    }
+  },
+  mounted() {
+    // this.$refs.myMap && this.$refs.myMap.showLegend('testReport', true)
+    this.loading = false
+    this.redayY = true
+  },
+  destroyed() {
+    // this.$refs.myMap && this.$refs.myMap.showLegend('testReport', false)
+    // this.data.that.clearMap()
+  },
+  methods: {
+    // 处理地图数据
+    getData(res) {
+      if (!res) {
+        this.loading = false
+      }
+      let pipArr = res.pipeData // 管道列表
+      let defectArr = res.defectData // 缺陷列表
+
+      console.log('得到的数据')
+      this.defectLevel = defectArr
+
+      // 缺陷类型统计图
+      let funcArr = defectArr.filter(v => v.defectType == '功能性缺陷' || this.typeArr.f.includes(v.defectCode))
+      let structArr = defectArr.filter(v => v.defectType === '结构性缺陷' || this.typeArr.s.includes(v.defectCode))
+      this.defectTypeObj.structArr = structArr
+      this.defectTypeObj.funcArr = funcArr
+      this.loading = false
+      this.redayY = true
+    },
+    mapMoveEvent(extent) {
+      this.loading = true
+      this.getDataFromExtent(extent).then((res) => {
+        this.loading = false
+        // 联动时数据变化
+        if (this.linkage) {
+          this.getData(res)
+        }
+      })
+    },
+    async getDataFromExtent(extent) {
+      let data = await this.getPipeData()
+      if (data.code === 1) {
+        // 地图范围过滤数据
+        return this.$refs.myMap.getDefectDataInMap(data.result, extent)
+      } else this.$message.error('请求数据出错')
+    },
+    // 根据条件获取缺陷数据
+    async getPipeData() {
+      let params = { wordInfoState: "1" }
+      // 缓存
+      let strKey = JSON.stringify(params)
+      if (this.mapData.hasOwnProperty(strKey)) {
+        return Promise.resolve(this.mapData[strKey])
+      } else {
+        let res = await getDefectDataBySE(params)
+        this.mapData[strKey] = res
+        return Promise.resolve(res)
+      }
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.engineering-manage {
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  //   overflow-y: scroll;
+  padding: 20px;
+  overflow: hidden;
+
+  // 分左右布局
+  .releaseTop-box {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      flex: 4;
+      // overflow-y: scroll;
+
+      .echarts-list {
+        padding: 0 20px;
+        box-sizing: border-box;
+        .threeTop {
+          width: 100%;
+          height: 300px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          & > .threeTop-item:nth-child(1),
+          & > .threeTop-item:nth-child(2) {
+            border-right: 1px solid #dedede;
+          }
+          .threeTop-item {
+            height: 100%;
+            // flex: 1;
+            width: 32%;
+            // border: 1px solid #666;
+          }
+        }
+        .threeBottom {
+          width: 100%;
+          height: 310px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 20px;
+
+          .threeBottom-one,
+          .threeBottom-two {
+            height: 100%;
+            // flex: 1;
+            // border: 1px solid #666;
+          }
+          .threeBottom-one {
+            width: 66%;
+            border-right: 1px solid #dedede;
+          }
+          .threeBottom-two {
+            width: 32%;
+          }
+        }
+      }
 
+      /deep/ .el-divider--horizontal {
+        margin: 10px 0 !important;
+      }
+      .top-title {
+        color: #555555;
+        font-size: 16px;
+        margin: 0 20px;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+      .flexCss {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+    .right {
+      flex: 3;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+      //   border: 1px solid #666;
+      .map-box {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>

src/views/pipelineDefect/analysis/defectAccessStatis/widget.vue

@@ -1,13 +1,555 @@
 <template>
-  <div>缺陷评价统计</div>
+  <div class="engineering-manage">
+    <!-- 管道缺陷评价统计 -->
+    <div class="table-box">
+      <div class="top-tool">
+        <div class="serch-engineering">
+          <div class="title">检测日期：</div>
+          <div class="sampleTime">
+            <el-row style="display: flex; justify-content: center; align-items: center">
+              <el-col :span="11">
+                <el-date-picker
+                  v-model="searchValue.jcStartDate"
+                  type="date"
+                  placeholder="选择开始日期"
+                  value-format="yyyy-MM-dd"
+                  size="small"
+                  :picker-options="sOpition"
+                  @change="sDateChange"
+                ></el-date-picker>
+              </el-col>
+              <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
+              <el-col :span="12">
+                <el-date-picker
+                  v-model="searchValue.jcEndDate"
+                  type="date"
+                  placeholder="选择结束日期"
+                  value-format="yyyy-MM-dd"
+                  size="small"
+                  :picker-options="eOpition"
+                  @change="eDateChange"
+                ></el-date-picker>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="title">起始井号：</div>
+          <el-input
+            size="small"
+            placeholder="请输入起始井号"
+            v-model="searchValue.startPoint"
+            clearable
+            style="margin-right: 10px"
+          >
+          </el-input>
+          <div class="title">终止井号：</div>
+          <el-input
+            size="small"
+            placeholder="请输入终止井号"
+            v-model="searchValue.endPoint"
+            clearable
+            style="margin-right: 10px"
+          >
+          </el-input>
+          <div class="title">缺陷类型：</div>
+          <el-select size="small" clearable v-model="searchValue.defectType" placeholder="选择缺陷类型">
+            <el-option v-for="item in contentEchatrs" :key="item.name" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+
+          <div class="title">类型名称：</div>
+          <el-select size="small" clearable v-model="searchValue.defectName" placeholder="选择类型名称">
+            <el-option v-for="item in echartsData" :key="item.name" :label="item.name" :value="item.name"> </el-option>
+          </el-select>
+          <el-button class="serch-btn" style="margin-left: 26px" type="primary" @click="searchApi"> 查询 </el-button>
+          <el-button class="serch-btn" type="primary" @click="getPdf('管道缺陷评价统计', 'defecteva')"> 导出 </el-button>
+        </div>
+        <div class="right-btn"></div>
+      </div>
+      <div id="defecteva" class="content">
+        <div id="mainE" style="height: 500px"></div>
+        <div style="border: 1px solid #ccc">
+          <div class="detailsTitle">管道缺陷评价统计表</div>
+          <summary-form :tabelData="returnTabel"></summary-form>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+<script>
+// 引入发布的组件
+import summaryForm from '../../components/summaryForm.vue'
+import { getPipeDefectsTypeCountMap } from '../../api/pipelineDefect'
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入饼状图组件
+require('echarts/lib/chart/pie')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+export default {
+  components: { summaryForm },
+  data() {
+    return {
+      // 日期选择器规则
+      sOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcEndDate) {
+            return time > new Date(this.searchValue.jcEndDate).getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+      eOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcStartDate) {
+            return time < new Date(this.searchValue.jcStartDate).getTime() - 8.64e7 || time > new Date().getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+
+      searchValue: {
+        jcStartDate: '',
+        jcEndDate: '',
+        startPoint: '',
+        endPoint: '',
+        defectType: '',
+        defectName: ''
+      },
+      defectQuantityStatisticsA: [
+        { title: '(AJ)支管暗接', type: 'AJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(BX)变形', type: 'BX', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CK)错口', type: 'CK', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CR)异物穿入', type: 'CR', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(FS)腐蚀', type: 'FS', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(PL)破裂', type: 'PL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(QF)起伏', type: 'QF', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(SL)渗透', type: 'SL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(TJ)脱节', type: 'TJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(TL)接口材料脱落', type: 'TL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
+      ], // 管道缺陷数量统计表
+      defectQuantityStatisticsB: [
+        { title: '(CJ)沉积', type: 'CJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CQ)残墙、坝根', type: 'CQ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(FZ)浮渣', type: 'FZ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(JG)结垢', type: 'JG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(SG)树根', type: 'SG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(ZW)障碍物', type: 'ZW', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
+      ],
+      defectSumObj: { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }, // 合计
+      form: {
+        name: '',
+        number: '',
+        constructionUnit: '',
+        designUnit: '',
+        workUnit: '',
+        testUnit: '',
+        probeUnit: '',
+        supervisorUnit: '',
+        projectIntroduction: ''
+      },
+      pageData: [],
+      contentEchatrs: [],
+      allArr: [
+        {
+          name: '1级',
+          Lname: '一级',
+          value: 0
+        },
+        {
+          name: '2级',
+          Lname: '二级',
+          value: 0
+        },
+        {
+          name: '3级',
+          Lname: '三级',
+          value: 0
+        },
+        {
+          name: '4级',
+          Lname: '四级',
+          value: 0
+        }
+      ],
+      echartsTitle: [],
+      echartsData: [],
+      typeArr: {
+        s: ['AJ', 'BX', 'CK', 'CR', 'FS', 'PL', 'QF', 'SL', 'TJ', 'TL'],
+        f: ['CJ', 'CQ', 'FZ', 'JG', 'SG', 'ZW']
+      },
+    }
+  },
+  async created() {
+    await this.getData()
+    await this.initData()
+  },
+  mounted() {
+  },
+  computed: {
+    returnTabel() {
+      return {
+        defectQuantityStatisticsA: this.defectQuantityStatisticsA,
+        defectQuantityStatisticsB: this.defectQuantityStatisticsB,
+        defectSumObj: this.defectSumObj
+      }
+    }
+  },
+  watch: {
+    pageData: function (newValue, old) {
+      let data = newValue
+      this.allArr = [
+        { name: '1级', Lname: ['一级', '1'], value: 0 },
+        { name: '2级', Lname: ['二级', '2'], value: 0 },
+        { name: '3级', Lname: ['三级', '3'], value: 0 },
+        { name: '4级', Lname: ['四级', '4'], value: 0 }
+      ]
+
+      // 内
+      let content = [{ name: '结构性缺陷', value: 0 }, { name: '功能性缺陷', value: 0 }]
+      data.forEach(defect => {
+        let type = defect.defectType
+        if (type) {
+          let typeObj = content.find(item => item.name === type)
+          typeObj.value += defect.defectNum
+        } else {
+          if (this.typeArr.s.includes(defect.defectCode)) { content[0].value += defect.defectNum }
+          if (this.typeArr.f.includes(defect.defectCode)) { content[1].value += defect.defectNum }
+        }
+      })
+      this.contentEchatrs = content
+
+      // 中
+      let echartsData = new Map()
+      data.forEach(item => {
+          if (!echartsData.has(item.defectLevel)) {
+            echartsData.set(item.defectLevel, item.defectNum)
+          } else {
+            echartsData.set(item.defectLevel, echartsData.get(item.defectLevel) + item.defectNum)
+          }
+      })
+      echartsData.forEach((value, key) => {
+        let find = this.allArr.find(i => i.Lname.includes(key))
+        if (find) { find.value = value }
+      })
+      // 外
+
+      let echartsDataArr = newValue.map((v) => {
+        return {
+          value: v.defectNum,
+          defectCode: v.defectCode,
+          name: v.defectName
+        }
+      })
+
+      echartsDataArr = echartsDataArr.reduce((obj, item) => {
+        let find = obj.find((i) => i.defectCode === item.defectCode)
+        let _d = {
+          ...item,
+          frequency: 1
+        }
+        find ? ((find.value += item.value), find.frequency++) : obj.push(_d)
+        return obj
+      }, [])
+
+      this.echartsTitle = echartsDataArr.map((titleV) => {
+        return titleV.name
+      })
+      this.echartsData = echartsDataArr
+      this.initData()
+    }
+  },
+  methods: {
+    sDateChange (t) {
+      if (!this.searchValue.jcEndDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcEndDate = this.searchValue.jcStartDate
+        })
+      }
+    },
+    eDateChange (t) {
+      if (!this.searchValue.jcStartDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcStartDate = this.searchValue.jcEndDate
+        })
+      }
+    },
+    // 搜索
+    searchApi() {
+      this.getData(this.searchValue)
+    },
+    async getData(params) {
+      this.defectSumObj = { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }
+      // {jcjcStartDate:检测开始日期,jcEndDate:检测结束日期,startPoint：起始井号", "endPoint：终止井号,defectType:缺陷类型，defectName：缺陷名称}
+      let data = {}
+      if (params) {
+        data.jcStartDate = params.jcStartDate
+        data.jcEndDate = params.jcEndDate
+        data.startPoint = params.startPoint
+        data.endPoint = params.endPoint
+        data.defectType = params.defectType
+        data.defectName = params.defectName
+      }
+      data.wordInfoState = '1'
+      let res = await getPipeDefectsTypeCountMap(data)
+      
+      this.defectQuantityStatisticsA.forEach(item => {
+        item['oneValue'] = 0
+        item['twoValue'] = 0
+        item['threeValue'] = 0
+        item['fourValue'] = 0
+      })
+      this.defectQuantityStatisticsB.forEach(item => {
+        item['oneValue'] = 0
+        item['twoValue'] = 0
+        item['threeValue'] = 0
+        item['fourValue'] = 0
+      })
+      for (let k in this.defectSumObj) {
+        this.defectSumObj[k] = 0
+      }
+      
+      this.pageData = res.result
+      if (this.pageData) {
+        this.pageData.forEach((resValue) => {
+
+          this.defectQuantityStatisticsA.forEach((sumValue) => {
+            if (resValue.defectCode == sumValue.type) {
+              if (['一级', '1'].includes(resValue.defectLevel)) {
+                sumValue.oneValue += resValue.defectNum
+              } else if (['二级', '2'].includes(resValue.defectLevel)) {
+                sumValue.twoValue += resValue.defectNum
+              } else if (['三级', '3'].includes(resValue.defectLevel)) {
+                sumValue.threeValue += resValue.defectNum
+              } else if (['四级', '4'].includes(resValue.defectLevel)) {
+                sumValue.fourValue += resValue.defectNum
+              }
+            }
+          })
+
+          this.defectQuantityStatisticsB.forEach((sumValue) => {
+            if (resValue.defectCode == sumValue.type) {
+              if (['一级', '1'].includes(resValue.defectLevel)) {
+                sumValue.oneValue += resValue.defectNum
+              } else if (['二级', '2'].includes(resValue.defectLevel)) {
+                sumValue.twoValue += resValue.defectNum
+              } else if (['三级', '3'].includes(resValue.defectLevel)) {
+                sumValue.threeValue += resValue.defectNum
+              } else if (['四级', '4'].includes(resValue.defectLevel)) {
+                sumValue.fourValue += resValue.defectNum
+              }
+            }
+          })
+        })
+
+
+        this.defectQuantityStatisticsA.forEach((v) => {
+          v.value = v.oneValue + v.twoValue + v.threeValue + v.fourValue
+          this.defectSumObj.oneSum += v.oneValue
+          this.defectSumObj.twoSum += v.twoValue
+          this.defectSumObj.threeSum += v.threeValue
+          this.defectSumObj.fourSum += v.fourValue
+          this.defectSumObj.total += v.value
+        })
+        this.defectQuantityStatisticsB.forEach((v) => {
+          v.value = v.oneValue + v.twoValue + v.threeValue + v.fourValue
+          this.defectSumObj.oneSum += v.oneValue
+          this.defectSumObj.twoSum += v.twoValue
+          this.defectSumObj.threeSum += v.threeValue
+          this.defectSumObj.fourSum += v.fourValue
+          this.defectSumObj.total += v.value
+        })
+        console.log('计算后的数据', this.returnTabel)
+      }
+    },
+    //初始化数据
+    initData() {
+      document.getElementById('mainE').removeAttribute('_echarts_instance_')
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById('mainE'))
+      // 绘制图表
+      myChart.setOption(
+        {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c}个 ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            top: '20',
+            right: '20',
+            data: this.echartsTitle
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              selectedMode: 'single',
+              radius: [0, '25%'],
+              label: {
+                position: 'inner',
+                fontSize: 12
+              },
+              labelLine: {
+                show: false
+              },
+              data: this.contentEchatrs
+            },
+            {
+              type: 'pie',
+              radius: ['30%', '45%'],
+              label: {
+                position: 'inner',
+                fontSize: 12
+              },
+              data: this.allArr
+            },
+            {
+              type: 'pie',
+              radius: ['55%', '65%'],
+              label: {
+                formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
+                backgroundColor: '#F6F8FC',
+                borderColor: '#8C8D8E',
+                borderWidth: 1,
+                borderRadius: 4,
+                rich: {
+                  b: {
+                    color: '#4C5058',
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    lineHeight: 33
+                  },
+                  per: {
+                    color: '#fff',
+                    backgroundColor: '#4C5058',
+                    padding: [4, 4],
+                    borderRadius: 4
+                  }
+                }
+              },
+              data: this.echartsData
+            }
+          ]
+        },
+        true
+      )
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.engineering-manage {
+  height: 100vh;
+  margin: 0;
+  padding: 20px 0;
+  box-sizing: border-box;
+  position: relative;
+  // 表格样式
+  .table-box {
+    width: 96%;
+    height: 100%;
+    margin: auto;
+    overflow-y: scroll;
+    .top-tool {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      // flex-wrap: wrap;
+      font-size: 14px;
+      /deep/ .serch-engineering {
+        display: flex;
+        // justify-content: space-around;
+        align-items: center;
+        margin-bottom: 14px;
+        .el-input {
+          width: 142px;
+          margin-right: 10px;
+        }
+        .serch-input {
+          width: 245px;
+        }
+        .el-input__inner {
+          height: 34px;
+        }
+        .date-css {
+          width: 135px;
+        }
+
+        .title {
+          font-family: Arial;
+          white-space: nowrap;
+          margin-left: 5px;
+        }
+      }
+      .serch-btn {
+        height: 34px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #2d74e7;
+        // margin-left: 14px;
+        padding: 12px;
+        border: none !important;
+      }
+
+      .serch-btn:hover {
+        opacity: 0.8;
+      }
+      .right-btn {
+        margin-bottom: 14px;
+        display: inline-block;
+        // display: flex;
+        // align-items: center;
+        // flex-direction: row;
+        // flex-wrap: wrap;
+      }
+    }
+    .content {
+      min-height: 100px;
+      width: 100%;
+      border: 1px solid #afe7f8;
+      padding: 10px;
+      box-sizing: border-box;
+      .detailsTitle {
+        color: #666;
+        font-size: 16px;
+        font-weight: bold;
+        height: 38px;
+        text-align: center;
+        line-height: 38px;
+        border: 2px solid #666;
+        background: #f3f7fe;
+      }
+
+      .title {
+        text-align: center;
+      }
+      .table-content {
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+        & > li {
+          display: flex;
+          align-items: center;
+          & > div {
+            height: 38px;
+            line-height: 38px;
+            flex: 1;
+            border: 1px solid #ccc;
+          }
+        }
+      }
+    }
+  }
 
+  // 选择框
+  /deep/ .el-select {
+    width: 150px;
+  }
+}
 </style>

src/views/pipelineDefect/analysis/defectAreaStatis/widget.vue

@@ -1,13 +1,867 @@
 <template>
-  <div>缺陷区域统计</div>
+  <div class="engineering-manage">
+    <!-- 管道缺陷区域统计 -->
+    <div class="releaseTop-box">
+      <!-- 左边部分 -->
+      <div class="right">
+        <!-- 地图 -->
+        <div class="map-box">
+          <simple-map @mapMoveEvent="mapMoveEvent" ref="myMap"></simple-map>
+        </div>
+      </div>
+      <!-- 右边部分 -->
+      <div class="left">
+        <div class="table-box">
+          <div class="top-tool">
+            <div class="itmetitle">
+              <div class="iconSymbol"></div>
+              <div class="titleName">统计条件</div>
+            </div>
+            <div class="serch-engineering">
+              <div class="title">检测日期：</div>
+              <div class="sampleTime">
+                <el-row style="display: flex; justify-content: center; align-items: center">
+                  <el-col :span="11">
+                    <el-date-picker
+                      v-model="searchValue.jcStartDate"
+                      type="date"
+                      placeholder="选择开始日期"
+                      value-format="yyyy-MM-dd"
+                      size="small"
+                      :picker-options="sOpition"
+                      @change="sDateChange"
+                    ></el-date-picker>
+                  </el-col>
+                  <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
+                  <el-col :span="12">
+                    <el-date-picker
+                      v-model="searchValue.jcEndDate"
+                      type="date"
+                      placeholder="选择结束日期"
+                      value-format="yyyy-MM-dd"
+                      size="small"
+                      :picker-options="eOpition"
+                      @change="eDateChange"
+                    ></el-date-picker>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+
+            <div class="serch-engineering">
+              <div class="title">起始井号</div>
+               <el-input
+                size="small"
+                placeholder="请输入起始井号"
+                v-model="searchValue.startPoint"
+                clearable
+                style="margin: 0 10px;width:150px"
+              ></el-input>
+            </div>
+            <div class="serch-engineering">
+              <div class="title">终止井号</div>
+               <el-input
+                width='150px'
+                size="small"
+                placeholder="请输入终止井号"
+                v-model="searchValue.endPoint"
+                clearable
+                style="margin: 0 10px;width:150px"
+              ></el-input>
+            </div>
+            <div class="serch-engineering">
+              <div class="title">缺陷等级：</div>
+              <el-select size="small" clearable v-model="searchValue.defectLevel" placeholder="选择建议">
+                <el-option
+                  v-for="item in defectLevels"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="operation-box">
+              <div class="serch-engineering">
+                <el-button class="serch-btn" type="primary" @click="drawFeature"> 范围 </el-button>
+                <el-button class="serch-btn" type="primary"  @click="clearDraw"> 清除 </el-button>
+                <el-button class="serch-btn" type="primary" @click="searchData"> 查询 </el-button>
+                <el-button class="serch-btn" type="primary" @click="getPdf('管道区域缺陷统计', 'areasta')"> 导出 </el-button>
+                <!-- <el-button class="serch-btn" type="primary" > 导出 </el-button> -->
+              </div>
+            </div>
+          </div>
+          <div class="itmetitle">
+            <div class="iconSymbol"></div>
+            <div class="titleName">统计结果</div>
+          </div>
+          <div class="content" v-loading="loading">
+            <div style="padding-left: 12px">
+              <el-radio v-model="radio" label="1">饼状图</el-radio>
+              <el-radio v-model="radio" label="2">柱状图</el-radio>
+              <el-checkbox v-model="checkDefectType">缺陷类型</el-checkbox>
+              <el-checkbox v-model="checkDefectLevel">缺陷等级</el-checkbox>
+              <el-checkbox v-model="checkDefectName">缺陷名称</el-checkbox>
+            </div>
+            <div id="areasta" style="padding: 10px">
+              <h2 style="text-align: center">管道缺陷区域统计图</h2>
+              <div id="mainPDAS" style="height: 330px"></div>
+              <!-- 表格 -->
+              <div class="detailsTitle">管道缺陷数量统计表</div>
+              <summary-form :tabelData="returnTabel"></summary-form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+<script>
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入饼状图组件
+require('echarts/lib/chart/pie')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+
+// 引入发布的组件
+import summaryForm from '../../components/summaryForm.vue'
+import simpleMap from '@/components/SimpleMap'
+import { getDefectDataBySE, queryDictionariesId } from '../../api/pipelineDefect'
+
+export default {
+  props: ['data'],
+  components: { simpleMap, summaryForm },
+  data() {
+    return {
+      loading: false, // 加载
+      fixSuggestList: [],
+      checkDefectType: true,
+      checkDefectName: true,
+      checkDefectLevel: true,
+
+      tableData: [], // 表格数据
+      typeArr: [], // 建议类型数组
+      numArr: [], // 管道数量
+      lengthArr: [], // 管道长度
+      radio: '1', // 单选框的值
+      searchValue: {
+        jcStartDate: '',
+        jcEndDate: '',
+        startPoint: '',
+        endPoint: '',
+        defectLevel: ''
+      },
+      defectLevels: ['一级', '二级', '三级', '四级'],
+      // 日期选择器规则
+      sOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcEndDate) {
+            return time > new Date(this.searchValue.jcEndDate).getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+      eOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcStartDate) {
+            return time < new Date(this.searchValue.jcStartDate).getTime() - 8.64e7 || time > new Date().getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+      defectQuantityStatisticsA: [
+        { title: '(AJ)支管暗接', type: 'AJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(BX)变形', type: 'BX', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CK)错口', type: 'CK', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CR)异物穿入', type: 'CR', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(FS)腐蚀', type: 'FS', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(PL)破裂', type: 'PL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(QF)起伏', type: 'QF', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(SL)渗透', type: 'SL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(TJ)脱节', type: 'TJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(TL)接口材料脱落', type: 'TL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
+      ], // 管道缺陷数量统计表
+      defectQuantityStatisticsB: [
+        { title: '(CJ)沉积', type: 'CJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(CQ)残墙、坝根', type: 'CQ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(FZ)浮渣', type: 'FZ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(JG)结垢', type: 'JG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(SG)树根', type: 'SG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
+        { title: '(ZW)障碍物', type: 'ZW', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
+      ],
+      defectSumObj: { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }, // 合计
+      contentEchatrs: [],
+      allArr: [
+        {
+          name: '1级',
+          Lname: '一级',
+          value: 0
+        },
+        {
+          name: '2级',
+          Lname: '二级',
+          value: 0
+        },
+        {
+          name: '3级',
+          Lname: '三级',
+          value: 0
+        },
+        {
+          name: '4级',
+          Lname: '四级',
+          value: 0
+        }
+      ],
+      echartsTitle: [],
+      echartsData: [],
+      // 
+      hasDraw: false,
+      mapData: {}
+    }
+  },
+
+  mounted() {
+    this.initData()
+    // this.$refs.myMap && this.$refs.myMap.showLegend('testReport', true)
+  },
+  destroyed() {
+    // this.$refs.myMap && this.$refs.myMap.showLegend('testReport', false)
+  },
+  methods: {
+    // 日期选择器设置，使开始时间小于结束时间，并且所选时间早于当前时间
+    sDateChange(t) {
+      if (!this.searchValue.jcEndDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcEndDate = this.searchValue.jcStartDate
+        })
+      }
+    },
+    eDateChange(t) {
+      if (!this.searchValue.jcStartDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcStartDate = this.searchValue.jcEndDate
+        })
+      }
+    },
+    // 处理地图给的数据
+    getMapData(res) {
+       if(!res){
+        this.loading = false
+      }
+      let arr = res.defectData
+
+      // 数据清零
+      this.defectQuantityStatisticsA.forEach(item => {
+        item.oneValue = 0
+        item.twoValue = 0
+        item.threeValue = 0
+        item.fourValue = 0
+        item.value = 0
+      })
+      this.defectQuantityStatisticsB.forEach(item => {
+        item.oneValue = 0
+        item.twoValue = 0
+        item.threeValue = 0
+        item.fourValue = 0
+        item.value = 0
+      })
+      this.defectSumObj = { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }
+      // 按缺陷名称给数据分类
+      // 缺陷数量统计
+      if (arr) {
+        arr.forEach((resValue) => {
+          this.defectQuantityStatisticsA.forEach((sumValue) => {
+            // console.log("类型是否相等",typeof resValue.defectCode,sumValue.type);
+            if (resValue.defectCode == sumValue.type) {
+              if (['一级', '1'].includes(resValue.defectLevel)) {
+                sumValue.oneValue += 1
+              } else if (['二级', '2'].includes(resValue.defectLevel)) {
+                sumValue.twoValue += 1
+              } else if (['三级', '3'].includes(resValue.defectLevel)) {
+                sumValue.threeValue += 1
+              } else if (['四级', '4'].includes(resValue.defectLevel)) {
+                sumValue.fourValue += 1
+              }
+            }
+          })
+
+          this.defectQuantityStatisticsB.forEach((sumValue) => {
+            if (resValue.defectCode == sumValue.type) {
+              if (['一级', '1'].includes(resValue.defectLevel)) {
+                sumValue.oneValue += 1
+              } else if (['二级', '2'].includes(resValue.defectLevel)) {
+                sumValue.twoValue += 1
+              } else if (['三级', '3'].includes(resValue.defectLevel)) {
+                sumValue.threeValue += 1
+              } else if (['四级', '4'].includes(resValue.defectLevel)) {
+                sumValue.fourValue += 1
+              }
+            }
+          })
+        })
+
+        this.defectQuantityStatisticsA.forEach((v) => {
+          v.value = v.oneValue + v.twoValue + v.threeValue + v.fourValue
+          this.defectSumObj.oneSum += v.oneValue
+          this.defectSumObj.twoSum += v.twoValue
+          this.defectSumObj.threeSum += v.threeValue
+          this.defectSumObj.fourSum += v.fourValue
+          this.defectSumObj.total += v.value
+        })
+        this.defectQuantityStatisticsB.forEach((v) => {
+          v.value = v.oneValue + v.twoValue + v.threeValue + v.fourValue
+          this.defectSumObj.oneSum += v.oneValue
+          this.defectSumObj.twoSum += v.twoValue
+          this.defectSumObj.threeSum += v.threeValue
+          this.defectSumObj.fourSum += v.fourValue
+          this.defectSumObj.total += v.value
+        })
+      }
+      this.loading = false
+      this.$nextTick(() => {
+        this.initData()
+      })
+    },
+    // 绘制
+    drawFeature() {
+      this.hasDraw = true
+      this.$refs.myMap.draw({
+        callback: (fea) => {
+          this.getDataFromExtent(fea).then((res) => {
+            this.getMapData(res)
+          })
+        }
+      })
+    },
+    // 清除
+    clearDraw () {
+      this.hasDraw = false
+      this.$refs.myMap && this.$refs.myMap.clearDraw()
+    },
+    // 地图移动
+    mapMoveEvent(extent) {
+      this.getDataFromExtent(extent).then((res) => {
+        this.getMapData(res)
+      })
+    },
+    // 查询
+    searchData () {
+      this.getDataFromExtent().then((res) => {
+        this.getMapData(res)
+      })
+    },
+    getDataFromExtent(extent) {
+      this.$refs.myMap.changeLoading(true)
+      return new Promise(resolve => {
+        this.$refs.myMap.changeLoading(false)
+        this.getPipeData().then(data => {
+          if (data.code === 1) {
+            // 地图范围过滤数据
+            resolve(this.$refs.myMap.getDefectDataInMap(data.result, extent, 1))
+          } else this.$message.error('请求数据出错')
+        })
+      })
+    },
+
+    // 根据条件获取缺陷数据
+    async getPipeData() {
+      let params = {
+        startPoint: '',
+        endPoint: '',
+        jcStartDate: '',
+        jcEndDate: '',
+        wordInfoState: "1",
+        defectLevel: '',
+        ...this.searchValue
+      }
+      // 缓存
+      let strKey = JSON.stringify(params)
+      if (this.mapData.hasOwnProperty(strKey)) {
+        return Promise.resolve(this.mapData[strKey])
+      } else {
+        let res = await getDefectDataBySE(params)
+        this.mapData[strKey] = res
+        return Promise.resolve(res)
+      }
+    },
+    //初始化数据(饼状图)
+    initData() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById('mainPDAS'))
+      // 绘制图表
+
+      if (this.radio == '1') {
+        myChart.setOption(
+          {
+            tooltip: {
+              trigger: 'item',
+              formatter: '{b}: {c}个 ({d}%)'
+            },
+            legend: {
+              orient: 'vertical',
+              top: '20',
+              right: '20',
+              data: this.echartsTitle
+            },
+            series: this.loadEchatrsPie
+          },
+          true
+        )
+      } else if (this.radio == '2') {
+        myChart.setOption(
+          {
+            tooltip: {
+              trigger: 'item'
+            },
+            legend: {},
+            xAxis: {
+              type: 'category',
+              data: ['一级', '二级', '三级', '四级']
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: this.loadEchatrsBar
+          },
+          true
+        )
+      }
+    },
+    // 动态设置echatrs大小
+    setEchatrsMain(main, radius) {
+      main.radius = radius
+      return main
+    }
+  },
+  computed: {
+    // 动态加载echatrs(饼图)
+    loadEchatrsPie() {
+      let allData = [...this.defectQuantityStatisticsA, ...this.defectQuantityStatisticsB]
+      // 类型
+      let typeData = [
+        { name: '结构性缺陷', value: 0 },
+        { name: '功能性缺陷', value: 0 },
+        // { name: '正常', value: 0 }
+      ]
+      typeData[0].value = this.defectQuantityStatisticsA.map(item => item.value).reduce((prev, next) => prev + next, 0)
+      typeData[1].value = this.defectQuantityStatisticsB.map(item => item.value).reduce((prev, next) => prev + next, 0)
+
+      let seriesType = {
+        type: 'pie',
+        selectedMode: 'single',
+        radius: [0, '25%'],
+        label: {
+          position: 'inner',
+          fontSize: 12
+        },
+        labelLine: {
+          show: false
+        },
+        data: typeData
+      }
+
+      // 级别
+      let levelData = [
+        { name: '1级', Lname: '一级', value: 0 },
+        { name: '2级', Lname: '二级', value: 0 },
+        { name: '3级', Lname: '三级', value: 0 },
+        { name: '4级', Lname: '四级', value: 0 }
+      ]
+      allData.forEach(item => {
+        levelData[0].value += item.oneValue
+        levelData[1].value += item.twoValue
+        levelData[2].value += item.threeValue
+        levelData[3].value += item.fourValue
+      })
+      let seriesLevel = {
+        type: 'pie',
+        radius: ['30%', '45%'],
+        label: {
+          position: 'inner',
+          fontSize: 12
+        },
+        data: levelData
+      }
+
+      // 缺陷名称
+      let defectData = allData.filter(item => {
+        return item.oneValue + item.twoValue + item.threeValue + item.fourValue > 0
+      }).map(item => {
+        return { name: item.title, value: item.oneValue + item.twoValue + item.threeValue + item.fourValue }
+      })
+      let seriesName= {
+        type: 'pie',
+        radius: ['55%', '65%'],
+        label: {
+          formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
+          backgroundColor: '#F6F8FC',
+          borderColor: '#8C8D8E',
+          borderWidth: 1,
+          borderRadius: 4,
+          rich: {
+            b: {
+              color: '#4C5058',
+              fontSize: 14,
+              fontWeight: 'bold',
+              lineHeight: 33
+            },
+            per: {
+              color: '#fff',
+              backgroundColor: '#4C5058',
+              padding: [4, 4],
+              borderRadius: 4
+            }
+          }
+        },
+        data: defectData
+      }
+
+      let arr = [this.checkDefectType, this.checkDefectName, this.checkDefectLevel]
+      if (arr.every(v => v)) {
+        return [seriesType, seriesName, seriesLevel]
+      }
+
+      // 判断条件
+      let condition1 = !this.checkDefectType && this.checkDefectName && this.checkDefectLevel
+      let condition2 = this.checkDefectType && !this.checkDefectName && this.checkDefectLevel
+      let condition3 = this.checkDefectType && this.checkDefectName && !this.checkDefectLevel
+      let condition4 = !this.checkDefectType && !this.checkDefectName && this.checkDefectLevel
+      let condition5 = this.checkDefectType && !this.checkDefectName && !this.checkDefectLevel
+      let condition6 = !this.checkDefectType && this.checkDefectName && !this.checkDefectLevel
+
+      if (condition1) {
+        return [this.setEchatrsMain(seriesLevel, [0, '45%']), this.setEchatrsMain(seriesName, ['55%', '65%'])]
+      } else if (condition2) {
+        return [this.setEchatrsMain(seriesType, [0, '45%']), this.setEchatrsMain(seriesLevel, ['55%', '65%'])]
+      } else if (condition3) {
+        return [this.setEchatrsMain(seriesType, [0, '45%']), this.setEchatrsMain(seriesName, ['55%', '65%'])]
+      } else if (condition4) {
+        return [this.setEchatrsMain(seriesLevel, [0, '65%'])]
+      } else if (condition5) {
+        return [this.setEchatrsMain(seriesType, [0, '65%'])]
+      } else if (condition6) {
+        return [this.setEchatrsMain(seriesName, [0, '65%'])]
+      } else {
+        return []
+      }
+    },
+    // 动态加载echatrs(柱状图)
+    loadEchatrsBar() {
+      let allData = [...this.defectQuantityStatisticsA, ...this.defectQuantityStatisticsB]
+      // 缺陷等级数据
+      let leveldata = [0, 0, 0, 0];
+      allData.forEach(item => {
+        leveldata[0] += item.oneValue
+        leveldata[1] += item.twoValue
+        leveldata[2] += item.threeValue
+        leveldata[3] += item.fourValue
+      })
+      let seriesLevel = {
+        name: '缺陷等级',
+        type: 'bar',
+        data: leveldata,
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `（${a['name']}）数量:${a['value']}   `
+          }
+        }
+      }
+      // 功能性、结构性缺陷数据
+      let sDefectData = [0, 0, 0, 0], fDefectData = [0, 0, 0, 0]
+      this.defectQuantityStatisticsA.forEach(item => {
+        sDefectData[0] += item.oneValue
+        sDefectData[1] += item.twoValue
+        sDefectData[2] += item.threeValue
+        sDefectData[3] += item.fourValue
+      })
+      this.defectQuantityStatisticsB.forEach(item => {
+        fDefectData[0] += item.oneValue
+        fDefectData[1] += item.twoValue
+        fDefectData[2] += item.threeValue
+        fDefectData[3] += item.fourValue
+      })
+      let seriesFtype = {
+        name: '功能性缺陷',
+        type: 'bar',
+        stack: 'defectType',
+        data: fDefectData,
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `${a['seriesName']}（${a['name']}）:${a['value']}   `
+          }
+        }
+      }
+      let seriesStype = {
+        name: '结构性缺陷',
+        type: 'bar',
+        stack: 'defectType',
+        data: sDefectData,
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `${a['seriesName']}（${a['name']}）:${a['value']}   `
+          }
+        }
+      }
+      // 各种缺陷
+      let seriesNames = allData.filter(item => {
+        // 去掉全是 0 的统计
+        return item.oneValue + item.twoValue + item.threeValue + item.fourValue > 0
+      }).map(item => {
+        return {
+          name: item.title,
+          type: 'bar',
+          stack: 'defectNames',
+          data: [item.oneValue, item.twoValue, item.threeValue, item.fourValue],
+          tooltip: {
+            trigger: 'item',
+            formatter: function (a) {
+            return `（${a['seriesName']}）数量:${a['value']}   `
+            }
+          }
+        }
+      })
+
+      let arr = [this.checkDefectType, this.checkDefectName, this.checkDefectLevel]
+      if (arr.every(v => v)) {
+        return [seriesLevel, seriesFtype, seriesStype, ...seriesNames]
+      }
+      // 判断条件
+      let condition1 = !this.checkDefectType && this.checkDefectName && this.checkDefectLevel
+      let condition2 = this.checkDefectType && !this.checkDefectName && this.checkDefectLevel
+      let condition3 = this.checkDefectType && this.checkDefectName && !this.checkDefectLevel
+      let condition4 = !this.checkDefectType && !this.checkDefectName && this.checkDefectLevel
+      let condition5 = this.checkDefectType && !this.checkDefectName && !this.checkDefectLevel
+      let condition6 = !this.checkDefectType && this.checkDefectName && !this.checkDefectLevel
+
+      if (condition1) {
+        return [seriesLevel, ...seriesNames]
+      } else if (condition2) {
+        return [seriesLevel, seriesFtype, seriesStype]
+      } else if (condition3) {
+        return [seriesFtype, seriesStype, ...seriesNames]
+      } else if (condition4) {
+        return [seriesLevel]
+      } else if (condition5) {
+        return [seriesFtype, seriesStype]
+      } else if (condition6) {
+        return [seriesNames]
+      }else {
+        return []
+      }
+    },
+    returnTabel() {
+      let obj = {
+        defectQuantityStatisticsA: this.defectQuantityStatisticsA,
+        defectQuantityStatisticsB: this.defectQuantityStatisticsB,
+        defectSumObj: this.defectSumObj
+      }
+      return obj
+    },
+  },
+  watch: {
+    radio: function (newValue, old) {
+      if (old != newValue) {
+        this.initData()
+      }
+    },
+    checkDefectType: function (newValue, old) {
+      this.initData()
+    },
+    checkDefectName: function (newValue, old) {
+      this.initData()
+    },
+    checkDefectLevel: function (newValue, old) {
+      this.initData()
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.engineering-manage {
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  //   overflow-y: scroll;
+  padding: 20px;
+  overflow: hidden;
+
+  /deep/.itmetitle {
+    height: 20px;
+    width: 100%;
+    font-size: 16px;
+    margin: 14px 0;
+    .iconSymbol {
+      height: 100%;
+      width: 5px;
+      background-color: royalblue;
+      float: left;
+    }
+    .titleName {
+      margin-left: 20px;
+      line-height: 24px;
+    }
+  }
+  // 分左右布局
+  .releaseTop-box {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      flex: 4;
+      overflow-y: scroll;
+      .table-box {
+        width: 96%;
+        // height: 100%;
+        margin: 20px auto;
+        .top-tool {
+          display: flex;
+          // justify-content: space-between;
+          // flex-direction: column;
+          // flex-wrap: wrap;
+          font-size: 14px;
+          margin-bottom: 14px;
+          flex-wrap: wrap;
+          /deep/ .serch-engineering {
+            display: flex;
+            // justify-content: space-around;
+            align-items: center;
+            // margin-right: 10px;
+            padding-left: 10px;
+            box-sizing: border-box;
+            margin-bottom: 10px;
+            .sampleTime {
+              width: 308px !important;
+              .el-input {
+                width: 140px;
+              }
+            }
+            // 选择框
+            .el-select {
+              width: 130px;
+            }
+            .serch-input {
+              width: 245px;
+            }
+            .el-input__inner {
+              height: 34px;
+            }
+            .date-css {
+              width: 135px;
+            }
+
+            .title {
+              font-family: Arial;
+              white-space: nowrap;
+              margin-left: 5px;
+            }
+          }
+          .serch-btn {
+            height: 34px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #2d74e7;
+            // margin-left: 14px;
+            padding: 12px;
+            border: none !important;
+          }
+
+          .serch-btn:hover {
+            opacity: 0.8;
+          }
+        }
+        .content {
+          height: 92%;
+          width: 100%;
+          // overflow-y: scroll;
+          padding: 10px;
+          box-sizing: border-box;
+          .detailsTitle {
+            color: #666;
+            font-size: 16px;
+            font-weight: bold;
+            height: 38px;
+            text-align: center;
+            line-height: 38px;
+            border: 2px solid #666;
+            background: #f3f7fe;
+          }
+          /deep/ .el-table {
+            flex: 1;
+            // overflow-y: scroll;
+            th.el-table__cell > .cell {
+              color: rgb(50, 59, 65);
+              height: 40px;
+              line-height: 40px;
+              background: rgb(234, 241, 253);
+            }
+            .el-table__row--striped > td {
+              background-color: #f3f7fe !important;
+            }
+          }
+          /deep/ .el-checkbox {
+            margin-right: 0px !important;
+            .el-checkbox__label {
+              padding-left: 6px;
+            }
+          }
+          /deep/ .el-radio {
+            margin-right: 9px;
+            .el-radio__label {
+              padding-left: 4px;
+            }
+          }
+          ul,
+          li {
+            direction: none;
+            padding: 0;
+            margin: 0;
+          }
+          .title {
+            text-align: center;
+          }
+          .table-content {
+            display: flex;
+            text-align: center;
+            flex-direction: column;
+            & > li {
+              display: flex;
+              align-items: center;
+              & > div {
+                height: 38px;
+                line-height: 38px;
+                flex: 1;
+                border: 1px solid #ccc;
+              }
+            }
+          }
+        }
+      }
+      .releaseContent {
+        border: 1px solid #9a9a9a;
+        overflow: scroll;
+      }
+    }
+    .right {
+      flex: 3;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+      //   border: 1px solid #666;
 
+      .map-box {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>

src/views/pipelineDefect/analysis/defectSortStatis/widget.vue

@@ -1,13 +1,574 @@
 <template>
-  <div>缺陷分类统计</div>
+  <div class="engineering-manage">
+    <!-- 管道缺陷分类 -->
+    <div class="table-box">
+      <div class="top-tool">
+        <div class="serch-engineering">
+          <div class="title">检测日期：</div>
+          <div class="sampleTime">
+            <el-row style="display: flex; justify-content: center; align-items: center">
+              <el-col :span="11">
+                <el-date-picker
+                  v-model="searchValue.jcStartDate"
+                  type="date"
+                  placeholder="选择开始日期"
+                  value-format="yyyy-MM-dd"
+                  size="small"
+                  :picker-options="sOpition"
+                  @change="sDateChange"
+                ></el-date-picker>
+              </el-col>
+              <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
+              <el-col :span="12">
+                <el-date-picker
+                  v-model="searchValue.jcEndDate"
+                  type="date"
+                  placeholder="选择结束日期"
+                  value-format="yyyy-MM-dd"
+                  size="small"
+                  :picker-options="eOpition"
+                  @change="eDateChange"
+                ></el-date-picker>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="title">起始井号：</div>
+          <el-input
+            size="small"
+            placeholder="请输入起始井号"
+            v-model="searchValue.startPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+          <div class="title">终止井号：</div>
+          <el-input
+            size="small"
+            placeholder="请输入终止井号"
+            v-model="searchValue.endPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+          <div class="title">缺陷类型：</div>
+          <el-select size="small" clearable v-model="searchValue.defectType" placeholder="选择缺陷类型">
+            <el-option
+              v-for="item in types"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+
+          <div class="title">缺陷名称：</div>
+          <el-select size="small" clearable v-model="searchValue.defectName" placeholder="选择类型名称">
+            <el-option
+              v-for="item in defectTypes"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
+            ></el-option>
+          </el-select>
+
+          <el-button
+            class="serch-btn"
+            style="margin-left: 26px"
+            type="primary"
+            @click="searchApi"
+          >查询</el-button>
+          <el-button class="serch-btn" type="primary" @click="getPdf('管道缺陷分类统计', 'defectDomId')">导出</el-button>
+        </div>
+        <div class="right-btn"></div>
+      </div>
+      <div id="defectDomId" class="content" v-show="!isNull">
+        <div id="mainA" style="height: 500px"></div>
+        <div style="border: 1px solid #ccc">
+          <div class="detailsTitle">管道缺陷分类统计表</div>
+          <table
+            width="100%"
+            border="1"
+            class="left-table"
+            cellspacing="0"
+            align="center"
+            stripe
+          >
+            <thead>
+              <tr height="34">
+                <th>缺陷类型</th>
+                <th>缺陷名称</th>
+                <th>缺陷数量</th>
+              </tr>
+            </thead>
+            <!-- <tr class="highlight" style="height: 20px">
+              <td>{{ zc.name }}</td>
+              <td>{{ zc.title }}</td>
+              <td>{{ zc.value }}</td>
+            </tr> -->
+            <tr
+              class="highlight"
+              :style="defectQuantityStatisticsA.length == 1 ? 'height: 20px;' : ''"
+              v-for="(v, i) in defectQuantityStatisticsA"
+              :key="v.title"
+            >
+              <td :rowspan="defectQuantityStatisticsA.length" v-if="i < 1">结构性缺陷</td>
+              <td>{{ v.title }}</td>
+              <td>{{ v.value }}</td>
+            </tr>
+            <tr
+              class="highlight"
+              :style="defectQuantityStatisticsB.length == 1 ? 'height: 20px;' : ''"
+              v-for="(v, i) in defectQuantityStatisticsB"
+              :key="i"
+            >
+              <td :rowspan="defectQuantityStatisticsB.length" v-if="i < 1">功能性缺陷</td>
+              <td>{{ v.title }}</td>
+              <td>{{ v.value }}</td>
+            </tr>
+            <tr class="defectSum">
+              <td colspan="2">合计</td>
+              <td>{{ defectSum }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div
+        v-if="isNull"
+        style="height: 100%; display: flex; justify-content: center; align-items: center"
+      >
+        <div style="text-align: center">
+          <img
+            style="width: 100px; height: 100px; -webkit-user-drag: none"
+            src="@/assets/images/nullData.png"
+            alt="暂无数据"
+            srcset
+          />
+          <p>暂无数据</p>
+        </div>
+      </div>
+    </div>
+    <!-- 添加卡片 -->
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+<script>
+import { getPipeDefectsTypeCount } from '../../api/pipelineDefect'
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入饼状图组件
+require('echarts/lib/chart/pie')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+export default {
+  data() {
+    return {
+      isNull: false, // 数据是否为空
+      // 日期选择器规则
+      sOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcEndDate) {
+            return time >= new Date(this.searchValue.jcEndDate).getTime()
+          }
+          return time >= new Date().getTime()
+        }
+      },
+      eOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcStartDate) {
+            return time <= new Date(this.searchValue.jcStartDate).getTime() - 8.64e7 || time > new Date().getTime()
+          }
+          return time >= new Date().getTime()
+        }
+      },
+
+      searchValue: {
+        jcStartDate: '',
+        jcEndDate: '',
+        startPoint: '',
+        endPoint: '',
+        defectType: '',
+        defectName: ''
+      },
+      defectSum: 0, // 合计
+      defectQuantityStatisticsA: [], // 管道缺陷数量统计表
+      defectQuantityStatisticsB: [],
+      echartsTitle: [],
+      echartsData: [],
+      contentEchatrs: [],
+      //
+      defectTypes: [],
+      types: ['结构性缺陷', '功能性缺陷'],
+      defectTypesData: [],
+      typeArr: {
+        s: ['AJ', 'BX', 'CK', 'CR', 'FS', 'PL', 'QF', 'SL', 'TJ', 'TL'],
+        f: ['CJ', 'CQ', 'FZ', 'JG', 'SG', 'ZW']
+      },
+    }
+  },
+  created() {
+    // this.getData().then((res) => {
+    //   if (res.result.length === 0) {
+    //     this.isNull = true
+    //   } else {
+    //     this.setData(res.result)
+    //     this.setTypes(res.result)
+    //     this.isNull = false
+    //   }
+    // })
+  },
+  mounted () {
+    this.setData()
+    this.setTypes()
+  },
+  watch: {
+    'searchValue.defectType': function (nv, ov) {
+      this.defectTypes = this.defectTypesData.filter(item => item.type && item.type.includes(nv))
+    }
+  },
+  methods: {
+    setTypes (data = []) {
+      console.log('设置类型')
+      let map = new Map()
+      map.set('结构性缺陷', [])
+      map.set('功能性缺陷', [])
+      data.forEach(v => {
+        let type = v.defectType
+        if (!type) {
+          if (this.typeArr.s.includes(v.defectCode)) { type = '结构性缺陷' }
+          if (this.typeArr.f.includes(v.defectCode)) { type = '功能性缺陷' }
+        }
+        if (!map.get(type).includes(v.defectName)) {
+          map.get(type).push(v.defectName)
+        }
+      })
+      map.forEach((value, key) => {
+        value.forEach(name => this.defectTypesData.push({ type: key, name }))
+      })
+      this.defectTypes = [...this.defectTypesData]
+    },
+    setData(data = []) {
+      this.defectQuantityStatisticsA = []
+      this.defectQuantityStatisticsB = []
+      this.defectSum = 0
+      this.echartsData = []
+
+      // 设置
+      let content = [{ name: '结构性缺陷', value: 0 }, { name: '功能性缺陷', value: 0 }]
+      data.forEach(defect => {
+        let type = defect.defectType
+        if (type) {
+          let typeObj = content.find(item => item.name === type)
+          typeObj.value += defect.defectNum
+        } else {
+          if (this.typeArr.s.includes(defect.defectCode)) { content[0].value += defect.defectNum }
+          if (this.typeArr.f.includes(defect.defectCode)) { content[1].value += defect.defectNum }
+        }
+      })
+      this.contentEchatrs = content
+      this.echartsTitle = data.filter(v => v).map(v => v.defectName)
+      let echartsData = new Map()
+      data.forEach(item => {
+          if (!echartsData.has(item.defectName)) {
+            echartsData.set(item.defectName, item.defectNum)
+          } else {
+            echartsData.set(item.defectName, echartsData.get(item.defectName) + item.defectNum)
+          }
+      })
+      echartsData.forEach((value, key) => {
+        this.echartsData.push({ name: key, value })
+      })
+
+      this.defectSum = data.map(item => item.defectNum).reduce((prev, next) => prev + next, 0)
+      data.forEach((pv) => {
+        if (pv.defectType == '结构性缺陷' || this.typeArr.s.includes(pv.defectCode)) {
+          this.defectQuantityStatisticsA.push({
+            name: pv.defectName,
+            type: pv.defectCode,
+            value: pv.defectNum,
+            title: `（${pv.defectCode}）${pv.defectName}` 
+          })
+        }
+
+        if (pv.defectType == '功能性缺陷' || this.typeArr.f.includes(pv.defectCode)) {
+          this.defectQuantityStatisticsB.push({
+            name: pv.defectName,
+            type: pv.defectCode,
+            value: pv.defectNum,
+            title: `（${pv.defectCode}）${pv.defectName}`
+          })
+        }
+      })
+
+      this.defectQuantityStatisticsA = this.defectQuantityStatisticsA.reduce((obj, item) => {
+        let find = obj.find((i) => i.name === item.name)
+        let _d = {
+          ...item,
+          frequency: 1
+        }
+        find ? ((find.value += item.value), find.frequency++) : obj.push(_d)
+        return obj
+      }, [])
+
+      this.defectQuantityStatisticsB = this.defectQuantityStatisticsB.reduce((obj, item) => {
+        let find = obj.find((i) => i.name === item.name)
+        let _d = {
+          ...item,
+          frequency: 1
+        }
+        find ? ((find.value += item.value), find.frequency++) : obj.push(_d)
+        return obj
+      }, [])
+      this.$nextTick(() => {
+        this.initData()
+      })
+    },
+    // 搜索
+    searchApi() {
+      this.getData(this.searchValue).then(res => {
+        if (res.result.length === 0) {
+          this.isNull = true
+        } else {
+          this.setData(res.result)
+          this.isNull = false
+        }
+      })
+    },
+    // 日期选择器设置，使开始时间小于结束时间，并且所选时间早于当前时间
+    sDateChange(t) {
+      if (!this.searchValue.jcEndDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcEndDate = this.searchValue.jcStartDate
+        })
+      }
+    },
+    eDateChange(t) {
+      if (!this.searchValue.jcStartDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcStartDate = this.searchValue.jcEndDate
+        })
+      }
+    },
+    async getData(params) {
+      // {jcjcStartDate:检测开始日期,jcEndDate:检测结束日期,startPoint：起始井号", "endPoint：终止井号,defectType:缺陷类型，defectName：缺陷名称}
+      let data = {}
+      data.wordInfoState = '1'
+      if (params) {
+        data.jcStartDate = params.jcStartDate
+        data.jcEndDate = params.jcEndDate
+        data.startPoint = params.startPoint
+        data.endPoint = params.endPoint
+        data.defectType = params.defectType
+        data.defectName = params.defectName
+      }
+      return getPipeDefectsTypeCount(data)
+    },
+    //初始化数据
+    initData() {
+      // 基于准备好的dom，初始化echarts实例
+      document.getElementById('mainA').removeAttribute('_echarts_instance_')
+      let myChart = echarts.init(document.getElementById('mainA'))
+      // 绘制图表
+      myChart.setOption(
+        {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c}个 ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            top: '20',
+            right: '20',
+            data: this.echartsTitle
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              selectedMode: 'single',
+              radius: [0, '30%'],
+              label: {
+                position: 'inner',
+                fontSize: 14
+              },
+              labelLine: {
+                show: false
+              },
+              data: this.contentEchatrs
+            },
+            {
+              // name: 'Access From',
+              type: 'pie',
+              radius: ['40%', '55%'],
+              // labelLine: {
+              //   length: 30
+              // },
+              label: {
+                formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
+                backgroundColor: '#F6F8FC',
+                borderColor: '#8C8D8E',
+                borderWidth: 1,
+                borderRadius: 4,
+                rich: {
+                  b: {
+                    color: '#4C5058',
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    lineHeight: 33
+                  },
+                  per: {
+                    color: '#fff',
+                    backgroundColor: '#4C5058',
+                    padding: [4, 4],
+                    borderRadius: 4
+                  }
+                }
+              },
+              data: this.echartsData
+            }
+          ]
+        },
+        true
+      )
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.engineering-manage {
+  height: 100vh;
+  margin: 0;
+  padding: 20px 0;
+  box-sizing: border-box;
+  position: relative;
+
+  // 表格样式
+  .table-box {
+    width: 96%;
+    height: 100%;
+    margin: auto;
+    overflow-y: scroll;
+    .top-tool {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      // flex-wrap: wrap;
+      font-size: 14px;
+      /deep/ .serch-engineering {
+        display: flex;
+        // justify-content: space-around;
+        align-items: center;
+        margin-bottom: 14px;
+        .el-input {
+          width: 142px;
+          margin-right: 10px;
+        }
+        .serch-input {
+          width: 142px;
+        }
+        .el-input__inner {
+          height: 34px;
+        }
+        .date-css {
+          width: 135px;
+        }
+
+        .title {
+          font-family: Arial;
+          white-space: nowrap;
+          margin-left: 5px;
+        }
+      }
+      .serch-btn {
+        height: 34px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #2d74e7;
+        // margin-left: 14px;
+        padding: 12px;
+        border: none !important;
+      }
+
+      .serch-btn:hover {
+        opacity: 0.8;
+      }
+      .right-btn {
+        margin-bottom: 14px;
+        display: inline-block;
+        // display: flex;
+        // align-items: center;
+        // flex-direction: row;
+        // flex-wrap: wrap;
+      }
+    }
+    .content {
+      min-height: 100px;
+      width: 100%;
+      border: 1px solid #afe7f8;
+      overflow: scroll;
+      padding: 10px;
+      box-sizing: border-box;
+      .detailsTitle {
+        color: #666;
+        font-size: 16px;
+        font-weight: bold;
+        height: 38px;
+        text-align: center;
+        line-height: 38px;
+        border: 2px solid #666;
+        background: #f3f7fe;
+      }
+      .left-table {
+        // border-color: #DEDEDE;
+        width: 100%;
+        font-weight: bold;
+        text-align: center;
+        th {
+          color: #666;
+          font-size: 14px;
+          background: #f3f7fe;
+        }
+        tr {
+          height: 38px;
+        }
+        .defectSum {
+          height: 20px;
+          background-color: #f3f7fe;
+        }
+        .highlight {
+          font-size: 12px;
+        }
+        .highlight:hover {
+          opacity: 0.8;
+          color: #e6a23c;
+          background-color: #f3f7fe;
+        }
+      }
+      .title {
+        text-align: center;
+      }
+      .table-content {
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+        & > li {
+          display: flex;
+          align-items: center;
+          & > div {
+            height: 38px;
+            line-height: 38px;
+            flex: 1;
+            border: 1px solid #ccc;
+          }
+        }
+      }
+    }
+  }
 
+  // 选择框
+  /deep/ .el-select {
+    width: 150px;
+  }
+}
 </style>

src/views/pipelineDefect/analysis/defectSum/widget.vue

@@ -1,13 +1,184 @@
 <template>
-  <div>管道缺陷汇总</div>
+  <tf-page>
+    <template v-slot:action>
+      <el-form :inline="true">
+        <el-form-item label="起始井号:">
+          <el-input
+            size="small"
+            placeholder="请输入起始井号"
+            v-model="searchValue.startPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="终止井号:">
+          <el-input
+            size="small"
+            placeholder="请输入终止井号"
+            v-model="searchValue.endPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item class="date-time" label="检测日期:">
+          <el-date-picker
+            v-model="searchValue.startDate"
+            type="date"
+            placeholder="选择开始日期"
+            value-format="yyyy-MM-dd"
+            size="small"
+            :picker-options="sOpition"
+            @change="sDateChange"
+          ></el-date-picker>至
+          <el-date-picker
+            v-model="searchValue.finishDate"
+            type="date"
+            placeholder="选择结束日期"
+            value-format="yyyy-MM-dd"
+            size="small"
+            :picker-options="eOpition"
+            @change="eDateChange"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="缺陷等级:">
+          <el-select size="small" clearable v-model="searchValue.defectLevel" placeholder="选择缺陷等级">
+            <el-option v-for="item in defectLevels" :key="item" :label="item" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="整改建议:">
+          <el-select size="small" clearable v-model="searchValue.defectLevel" placeholder="选择整改建议">
+            <el-option
+              v-for="item in checkSuggestList"
+              :key="item.codeValue"
+              :label="item.codeValue"
+              :value="item.codeValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" style="margin-right: 5px" type="primary" @click="updateTable">搜索</el-button>
+          <download-excel
+            style="display:inline-block"
+            :fields="exportFields"
+            :data="exportData"
+            :before-finish="afterExport"
+            name="管道缺陷汇总表.xls"
+            type="xls"
+          >
+            <el-button size="small" type="primary">导出</el-button>
+          </download-excel>
+        </el-form-item>
+      </el-form>
+    </template>
+    <tf-table
+      :columns="defectSumCols"
+      :data="tableData"
+      :pagination="pagination"
+      v-loading="loading"
+      @page-change="onPageChange"
+    ></tf-table>
+  </tf-page>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
-</script>
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { IPagination } from '@/api/common'
+import { getDefaultPagination } from '@/utils/constant'
+import { defectSumCols } from '../../cols'
+import Detail from './components/detail.vue'
+import { queryPageDefectInfo, queryDictionariesId } from '../api/defect'
+
+@Component({ name: 'DefectSum' })
+export default class DefectSum extends Vue {
+  get defectLevels () {
+    return ['一级', '二级', '三级', '四级',]
+  }
+
+  checkSuggestList = []
 
-<style>
+  defectSumCols = defectSumCols
+  loading: Boolean = false
+  pagination: IPagination = getDefaultPagination()
+
+  tableData = []
+
+  sOpition = {
+    disabledDate: (time) => {
+      time = time.getTime()
+      if (this.searchValue.finishDate) {
+        return time > new Date(this.searchValue.finishDate).getTime()
+      }
+      return time > new Date().getTime()
+    }
+  }
+  eOpition = {
+    disabledDate: (time) => {
+      time = time.getTime()
+      if (this.searchValue.startDate) {
+        return time < new Date(this.searchValue.startDate).getTime() - 8.64e7 || time > new Date().getTime()
+      }
+      return time > new Date().getTime()
+    }
+  }
+
+  searchValue = {
+    startDate: '',
+    finishDate: '',
+    startPoint: '',
+    endPoint: '',
+    checkSuggest: '',
+    defectLevel: ''
+  }
+  exportFields = {}
+  exportData = []
+
+  afterExport() {
+    this.$message.success('导出数据成功')
+  }
+  sDateChange(t) {
+    console.log('时间选择')
+    if (!this.searchValue.finishDate) {
+      this.$nextTick(() => {
+        this.searchValue.finishDate = this.searchValue.startDate
+      })
+    }
+  }
+  eDateChange(t) {
+    if (!this.searchValue.startDate) {
+      this.$nextTick(() => {
+        this.searchValue.startDate = this.searchValue.finishDate
+      })
+    }
+  }
+
+  mounted() {
+    this.updateTable()
+  }
+  
+  onPageChange() {}
+
+  updateTable() {
+    this.pagination.total = 2
+  }
+}
+</script>
 
+<style lang='scss' scoped>
+/deep/.el-form-item__content {
+  input {
+    width: 160px !important;
+  }
+}
+/deep/ .date-time {
+  .el-form-item__content {
+    input {
+      width: 100% !important;
+    }
+  }
+}
 </style>

src/views/pipelineDefect/analysis/evaluateStatis/widget.vue

@@ -1,13 +1,668 @@
 <template>
-  <div>管道评估统计</div>
+  <div class="engineering-manage">
+    <!-- 管道评估统计 -->
+    <div class="releaseTop-box">
+      <!-- 左边部分 -->
+      <div class="right">
+        <!-- 地图 -->
+        <div class="map-box">
+          <simple-map @mapMoveEvent="mapMoveEvent" ref="myMap"></simple-map>
+        </div>
+      </div>
+      <!-- 右边部分 -->
+      <div class="left">
+        <div class="table-box">
+          <div class="top-tool">
+            <div class="itmetitle">
+              <div class="iconSymbol"></div>
+              <div class="titleName">统计条件</div>
+            </div>
+            <div class="serch-engineering">
+              <div class="title">检测日期：</div>
+              <div class="sampleTime">
+                <el-row style="display: flex; justify-content: center; align-items: center">
+                  <el-col :span="11">
+                    <el-date-picker
+                      v-model="searchValue.jcStartDate"
+                      type="date"
+                      placeholder="选择开始日期"
+                      value-format="yyyy-MM-dd"
+                      size="small"
+                      :picker-options="sOpition"
+                      @change="sDateChange"
+                    ></el-date-picker>
+                  </el-col>
+                  <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
+                  <el-col :span="12">
+                    <el-date-picker
+                      v-model="searchValue.jcEndDate"
+                      type="date"
+                      placeholder="选择结束日期"
+                      value-format="yyyy-MM-dd"
+                      size="small"
+                      :picker-options="eOpition"
+                      @change="eDateChange"
+                    ></el-date-picker>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+            <div class="serch-engineering">
+              <div class="title">整改建议：</div>
+              <el-select size="small" v-model="searchValue.checkSuggest" clearable placeholder="选择建议">
+                <el-option
+                  v-for="item in checkSuggestList"
+                  :key="item.codeValue"
+                  :label="item.codeValue"
+                  :value="item.codeValue"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="operation-box">
+              <div class="serch-engineering">
+                <el-button size="small" class="serch-btn" type="primary" @click="search"> 查询 </el-button>
+                <el-button size="small" class="serch-btn" type="primary" @click="getPdf('管道评估统计', 'evaSta')"> 导出 </el-button>
+                <el-button size="small" class="serch-btn" type="primary" @click="drawFeature">范围</el-button>
+                <el-button size="small" class="serch-btn" type="primary" @click="clearDraw">清除</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="itmetitle">
+            <div class="iconSymbol"></div>
+            <div class="titleName">统计结果</div>
+          </div>
+          <div class="content" v-loading="loading">
+            <div style="padding-left: 12px">
+              <el-radio v-model="radio" label="1">饼状图</el-radio>
+              <el-radio v-model="radio" label="2">柱状图</el-radio>
+              <el-checkbox v-model="pipNum">管道数量</el-checkbox>
+              <el-checkbox v-model="pipLen">管道长度</el-checkbox>
+            </div>
+            <div id="evaSta">
+              <h2 style="text-align: center">管道评估统计图</h2>
+              <div id="mainPESS" style="height: 250px"></div>
+              <!-- 表格 -->
+              <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                stripe
+                style="width: 100%"
+                show-summary
+              >
+                <template slot="empty">
+                  <img src="@/assets/icon/null.png" alt="暂无数据" />
+                </template>
+                <el-table-column header-align="center" align="center" label="管道评估统计表">
+                  <el-table-column
+                    :prop="v.name"
+                    header-align="center"
+                    align="center"
+                    :label="v.label"
+                    show-overflow-tooltip
+                    v-for="v in tableContent"
+                    :key="v.name"
+                  >
+                  </el-table-column>
+                </el-table-column>
+              </el-table>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+<script>
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入饼状图组件
+require('echarts/lib/chart/pie')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+
+import simpleMap from '@/components/SimpleMap'
+import { getDefectDataBySE, queryDictionariesId } from '../../api/pipelineDefect'
+
+export default {
+  props: ['data'],
+  components: { simpleMap },
+  data() {
+    return {
+      loading: false, // 加载
+      checkSuggestList: [],
+      pipNum: true,
+      pipLen: true,
+      pipNumShow: 1,
+      pipLenShow: 0,
+      tableData: [], // 表格数据
+      // 表格参数
+      tableContent: [
+        { label: '整改建议', name: 'type' },
+        { label: '数量(条)', name: 'num' },
+        { label: '长度(米)', name: 'len' }
+      ],
+      typeArr: [], // 建议类型数组
+      numArr: [], // 管道数量
+      lengthArr: [], // 管道长度
+      radio: '1', // 单选框的值
+      zero: '',
+      form: {
+        name: '',
+        number: '',
+        constructionUnit: '',
+        designUnit: '',
+        workUnit: '',
+        testUnit: '',
+        probeUnit: '',
+        supervisorUnit: '',
+        projectIntroduction: ''
+      },
+      searchValue: {
+        jcStartDate: '',
+        jcEndDate: '',
+        checkSuggest: ''
+        // 检测日期
+      },
+      // 日期选择器规则
+      sOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcEndDate) {
+            return time > new Date(this.searchValue.jcEndDate).getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+      eOpition: {
+        disabledDate: (time) => {
+          time = time.getTime()
+          if (this.searchValue.jcStartDate) {
+            return time < new Date(this.searchValue.jcStartDate).getTime() - 8.64e7 || time > new Date().getTime()
+          }
+          return time > new Date().getTime()
+        }
+      },
+
+      // 筛选条件
+      filter: {
+        jcStartDate: '',
+        jcEndDate: '',
+        checkSuggest: ''
+      },
+      hasDraw: false,
+      // 储存数据
+      mapData: {}
+    }
+  },
+  mounted() {
+    // this.getParamsId()
+    this.initData()
+    // this.$refs.myMap && this.$refs.myMap.showLegend('pipelineEvaluate', true)
+
+  },
+  // destroyed() {
+  //   this.data.that.clearMap()
+  //   this.$refs.myMap && this.$refs.myMap.showLegend('pipelineEvaluate', false)
+  // },
+  methods: {
+    clearDraw () {
+      this.hasDraw = false
+      this.$refs.myMap.clearDraw()
+    },
+    // 获取字典
+    getParamsId() {
+      // 获取字典
+      console.log('获取整改建议')
+      queryDictionariesId({ keys: 'check_suggest' }).then(res => {
+        if (res.code === 1) {
+          this.checkSuggestList = res.result.check_suggest
+        } else this.$message.error('获取整改建议字典失败！')
+      })
+    },
+    // 日期选择器设置，使开始时间小于结束时间，并且所选时间早于当前时间
+    sDateChange(t) {
+      if (!this.searchValue.jcEndDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcEndDate = this.searchValue.jcStartDate
+        })
+      }
+    },
+    eDateChange(t) {
+      if (!this.searchValue.jcStartDate) {
+        this.$nextTick(() => {
+          this.searchValue.jcStartDate = this.searchValue.jcEndDate
+        })
+      }
+    },
+    // 处理地图给的数据
+    getMapData(res) {
+      // this.tableData = [...res]
+      if(!res){
+        this.loading = false
+      }
+      let arrV = Object.values(res)
+      let arrK = Object.keys(res)
+      arrV.forEach((v, i) => {
+        v.type = arrK[i]
+        v.len = v.len.toFixed(2)
+      })
+      // console.log('res', arrV)
+      this.tableData = arrV
+      // 建议类型数组
+      this.typeArr = this.tableData.map((v) => {
+        return v.type
+      })
+      // 管道长度统计
+      this.lengthArr = this.tableData.map((v) => {
+        return {
+          value: v.len,
+          name: v.type
+        }
+      })
+      // 管道数量统计
+      this.numArr = this.tableData.map((v) => {
+        return {
+          value: v.num,
+          name: v.type
+        }
+      })
+      this.$nextTick(() => {
+        this.loading = false
+        this.initData()
+      })
+    },
+    // 绘制
+    drawFeature() {
+      this.hasDraw = true
+      this.$refs.myMap.draw({
+        callback: (fea) => {
+          this.getDataFromExtent(fea).then((res) => {
+            this.getMapData(res)
+          })
+        }
+      })
+    },
+    // 地图范围变化
+    mapMoveEvent(extent) {
+      this.getDataFromExtent(extent).then((res) => {
+        !this.hasDraw && this.getMapData(res)
+      })
+    },
+    // 查询
+    search() {
+      this.getDataFromExtent().then((res) => {      
+        console.log('这是查询的数据', res)
+        this.getMapData(res)
+      })
+    },
+    getDataFromExtent(extent) {
+      return new Promise(resolve => {
+      this.loading = true
+        this.getPipeData().then(data => {
+          this.loading = false
+          if (data.code === 1) {
+            // 地图范围过滤数据
+            resolve(this.$refs.myMap.getDataInMap(data.result, extent))
+          } else this.$message.error('请求数据出错')
+        })
+      })
+
+    }, 
+    // 根据条件获取缺陷数据
+    async getPipeData() {
+      let params = {
+        jcStartDate: '',
+        jcEndDate: '',
+        checkSuggest: '',
+        wordInfoState: 1,
+        ...this.searchValue
+      }
+      // 缓存
+      let strKey = JSON.stringify(params)
+      if (this.mapData.hasOwnProperty(strKey)) {
+        return Promise.resolve(this.mapData[strKey])
+      } else {
+        let res = await getDefectDataBySE(params)
+        this.mapData[strKey] = res
+        return Promise.resolve(res)
+      }
+    },
+
+    //初始化数据(饼状图)
+    initData() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById('mainPESS'))
+      // 绘制图表
+      if (this.radio == '1') {
+        myChart.setOption(
+          {
+            tooltip: {
+              trigger: 'item'
+            },
+            legend: {
+              right: 'right',
+              top: 'center',
+              data: this.typeArr
+            },
+            series: this.loadEchatrsPie
+          },
+          true
+        )
+      } else if (this.radio == '2') {
+        myChart.setOption(
+          {
+            tooltip: {
+              trigger: 'item'
+            },
+
+            legend: {},
+            xAxis: {
+              type: 'category',
+              data: this.typeArr
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: this.loadEchatrsBar
+          },
+          true
+        )
+      }
+
+      myChart.on('legendselectchanged', (e) => {
+        for (var i = 0; i < option.legend.data.length; i++) {
+          var opt = option.legend.data[i]
+          if (opt === e.name) {
+            seriesindex = i
+            idx = 0
+            console.log(e.name)
+          }
+        }
+      })
+    },
+
+    // 动态设置echatrs大小
+    setEchatrsMain(main, radius) {
+      main.radius = radius
+      return main
+    }
+  },
+  computed: {
+    // 动态加载echatrs(饼图)
+    loadEchatrsPie() {
+      let seriesNum = {
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `（${a['data']['name']}）数量:${a['data']['value']}   `
+          }
+        },
+        name: '管道数量统计',
+        type: 'pie',
+        selectedMode: 'single',
+        radius: [0, '50%'],
+        label: {
+          position: 'inner',
+          fontSize: 10
+        },
+        labelLine: {
+          show: false
+        },
+        data: this.numArr
+      }
+      let seriesLength = {
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `（${a['data']['name']}）长度:${a['data']['value']}   `
+          }
+        },
+        name: '管道长度统计',
+        type: 'pie',
+        radius: ['60%', '80%'],
+        labelLine: {
+          length: 10
+        },
+        label: {
+          formatter: ' {b}：{c} \n {d}% '
+        },
+        data: this.lengthArr
+      }
+
+      let resMain = []
+      if (this.pipNum && this.pipLen) {
+        resMain =  [seriesNum, seriesLength]
+      } else if (this.pipNum) {
+        resMain = [this.setEchatrsMain(seriesNum, [0, '80%'])]
+      } else if (this.pipLen) {
+        resMain = [this.setEchatrsMain(seriesLength, [0, '80%'])]
+      }
+      return resMain
+    },
+    // 动态加载echatrs(柱状图)
+    loadEchatrsBar() {
+      let seriesNum = {
+        name: '管道数量统计',
+        type: 'bar',
+        data: this.numArr,
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `（${a['data']['name']}）数量:${a['data']['value']}   `
+          }
+        }
+      }
+      let seriesLength = {
+        name: '管道长度统计',
+        type: 'bar',
+        data: this.lengthArr,
+        tooltip: {
+          trigger: 'item',
+          formatter: function (a) {
+            return `（${a['data']['name']}）长度:${a['data']['value']}   `
+          }
+        }
+      }
+
+      let resMain = []
+      if (this.pipNum && this.pipLen) {
+        resMain =  [seriesNum, seriesLength]
+      } else if (this.pipNum) {
+        resMain = [seriesNum]
+      } else if (this.pipLen) {
+        resMain = [seriesLength]
+      }
+      return resMain
+    }
+  },
+  watch: {
+    radio: function (newValue, old) {
+      if (old != newValue) {
+        this.initData()
+      }
+    },
+    pipNum: function (newValue, old) {
+      newValue ? (this.pipNumShow = 1) : (this.pipNumShow = 0)
+      this.initData()
+    },  
+    pipLen: function (newValue, old) {
+      newValue ? (this.pipLenShow = 1) : (this.pipLenShow = 0)
+      this.initData()
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.engineering-manage {
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  //   overflow-y: scroll;
+  padding: 20px;
+  overflow: hidden;
+
+  /deep/.itmetitle {
+    height: 20px;
+    width: 100%;
+    font-size: 16px;
+    margin: 14px 0;
+    .iconSymbol {
+      height: 100%;
+      width: 5px;
+      background-color: royalblue;
+      float: left;
+    }
+    .titleName {
+      margin-left: 20px;
+      line-height: 24px;
+    }
+  }
+  // 分左右布局
+  .releaseTop-box {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      flex: 4;
+      overflow-y: scroll;
+      .table-box {
+        width: 96%;
+        height: 100%;
+        margin: 20px auto;
+        .top-tool {
+          display: flex;
+          // justify-content: space-between;
+          // flex-direction: column;
+          // flex-wrap: wrap;
+          font-size: 14px;
+          margin-bottom: 14px;
+          flex-wrap: wrap;
+          /deep/ .serch-engineering {
+            display: flex;
+            // justify-content: space-around;
+            align-items: center;
+            // margin-right: 10px;
+            padding-left: 16px;
+            box-sizing: border-box;
+            margin-bottom: 10px;
+            .sampleTime {
+              width: 308px !important;
+              .el-input {
+                width: 140px;
+              }
+            }
+            // 选择框
+            .el-select {
+              width: 130px;
+            }
+            .serch-input {
+              width: 245px;
+            }
+            .el-input__inner {
+              height: 34px;
+            }
+            .date-css {
+              width: 135px;
+            }
+
+            .title {
+              font-family: Arial;
+              white-space: nowrap;
+              margin-left: 5px;
+            }
+          }
+          .serch-btn {
+            height: 34px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #2d74e7;
+            // margin-left: 14px;
+            padding: 12px;
+            border: none !important;
+          }
+
+          .serch-btn:hover {
+            opacity: 0.8;
+          }
+        }
+        .content {
+          height: 92%;
+          width: 100%;
+          // overflow-y: scroll;
+          padding: 10px;
+          box-sizing: border-box;
+          /deep/ .el-table {
+            flex: 1;
+            // overflow-y: scroll;
+            th.el-table__cell > .cell {
+              color: rgb(50, 59, 65);
+              height: 40px;
+              line-height: 40px;
+              background: rgb(234, 241, 253);
+            }
+            .el-table__row--striped > td {
+              background-color: #f3f7fe !important;
+            }
+          }
+          /deep/ .el-checkbox {
+            margin-right: 0px !important;
+            .el-checkbox__label {
+              padding-left: 6px;
+            }
+          }
+          /deep/ .el-radio {
+            margin-right: 9px;
+            .el-radio__label {
+              padding-left: 4px;
+            }
+          }
+          ul,
+          li {
+            direction: none;
+            padding: 0;
+            margin: 0;
+          }
+          .title {
+            text-align: center;
+          }
+          .table-content {
+            display: flex;
+            text-align: center;
+            flex-direction: column;
+            & > li {
+              display: flex;
+              align-items: center;
+              & > div {
+                height: 38px;
+                line-height: 38px;
+                flex: 1;
+                border: 1px solid #ccc;
+              }
+            }
+          }
+        }
+      }
+      .releaseContent {
+        border: 1px solid #9a9a9a;
+        overflow: scroll;
+      }
+    }
+    .right {
+      flex: 3;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+      //   border: 1px solid #666;
 
+      .map-box {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>

src/views/pipelineDefect/analysis/evaluateSum/widget.vue

@@ -1,13 +1,159 @@
 <template>
-  <div>管道评估汇总</div>
+  <tf-page>
+    <template v-slot:action>
+      <el-form :inline="true">
+        <el-form-item label="起始井号:">
+          <el-input
+            size="small"
+            placeholder="请输入起始井号"
+            v-model="searchValue.startPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="终止井号:">
+          <el-input
+            size="small"
+            placeholder="请输入终止井号"
+            v-model="searchValue.endPoint"
+            clearable
+            style="margin-right: 10px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item class="date-time" label="检测日期:">
+          <el-date-picker
+            v-model="searchValue.startDate"
+            type="date"
+            placeholder="选择开始日期"
+            value-format="yyyy-MM-dd"
+            size="small"
+            :picker-options="sOpition"
+            @change="sDateChange"
+          ></el-date-picker>
+            至
+          <el-date-picker
+            v-model="searchValue.finishDate"
+            type="date"
+            placeholder="选择结束日期"
+            value-format="yyyy-MM-dd"
+            size="small"
+            :picker-options="eOpition"
+            @change="eDateChange"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" style="margin-right: 5px" type="primary" @click="searchApi">搜索</el-button>
+          <download-excel
+            style="display:inline-block"
+            :fields="exportFields"
+            :data="exportData"
+            :before-finish="afterExport"
+            name="管道缺陷汇总表.xls"
+            type="xls"
+          >
+            <el-button size="small" type="primary">导出</el-button>
+          </download-excel>
+        </el-form-item>
+      </el-form>
+    </template>
+    <tf-table
+      :columns="evaluateSumCols"
+      :data="tableData"
+      :pagination="pagination"
+      v-loading="loading"
+      @page-change="onPageChange"
+    ></tf-table>
+  </tf-page>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-})
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { IPagination } from '@/api/common'
+import { getDefaultPagination } from '@/utils/constant'
+import { evaluateSumCols } from '../../cols'
+import Detail from './components/detail.vue'
+import { queryPageDefectInfo, queryDictionariesId } from '../api/defect'
+
+@Component({ name: 'EvaluateSum' })
+export default class EvaluateSum extends Vue {
+  evaluateSumCols = evaluateSumCols
+  loading: Boolean = false
+  pagination: IPagination = getDefaultPagination()
+
+  tableData = []
+  sOpition = {
+    disabledDate: (time) => {
+      time = time.getTime()
+      if (this.searchValue.finishDate) {
+        return time > new Date(this.searchValue.finishDate).getTime()
+      }
+      return time > new Date().getTime()
+    }
+  }
+  eOpition = {
+    disabledDate: (time) => {
+      time = time.getTime()
+      if (this.searchValue.startDate) {
+        return time < new Date(this.searchValue.startDate).getTime() - 8.64e7 || time > new Date().getTime()
+      }
+      return time > new Date().getTime()
+    }
+  }
+
+  searchValue = {
+    startDate: '',
+    finishDate: '',
+    startPoint: '',
+    endPoint: '',
+    checkSuggest: '',
+    defectLevel: ''
+  }
+  exportFields = {}
+  exportData = []
+
+  afterExport() {
+    this.$message.success('导出数据成功')
+  }
+  sDateChange(t) {
+    console.log('时间选择')
+    if (!this.searchValue.finishDate) {
+      this.$nextTick(() => {
+        this.searchValue.finishDate = this.searchValue.startDate
+      })
+    }
+  }
+  eDateChange(t) {
+    if (!this.searchValue.startDate) {
+      this.$nextTick(() => {
+        this.searchValue.startDate = this.searchValue.finishDate
+      })
+    }
+  }
+  mounted() {
+    this.updateTable()
+  }
+  onPageChange() {}
+  updateTable() {
+    this.pagination.total = 2
+  }
+}
 </script>
 
-<style>
+<style lang='scss' scoped>
+/deep/.el-form-item__content {
+
+  input {
+    width: 160px!important;
+  }
+}
+/deep/ .date-time {
+  .el-form-item__content {
+    input {
+      width: 100%!important;
+    }
+  }
+}
 
 </style>

src/views/pipelineDefect/manage/engineer/widget.vue

@@ -1,17 +1,146 @@
 <template>
-  <div>工程管理</div>
+  <tf-page>
+    <template v-slot:action>
+      <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
+        <div style="display:flex;width:280px">
+          <el-input size="small" v-model="formData.serchText" placeholder="请输入工程编号、工程名称" clearable />
+          <el-button type="primary" size="small" @click="addData" style="margin-left:10px;">搜索</el-button>
+        </div>
+        <div>
+          <el-button type="primary" size="small" @click="addData">添加</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            :disabled="!multipleSelection.length"
+            @click="editData"
+          >修改</el-button>
+          <el-button
+            type="danger"
+            size="small"
+            :disabled="!multipleSelection.length"
+            @click="deleteData"
+          >删除</el-button>
+        </div>
+      </el-row>
+    </template>
+    <tf-table
+      ref="multipleTable"
+      :columns="engineerCols"
+      :data="tableData"
+      :pagination="pagination"
+      v-loading="loading"
+      @row-click ="onClick"
+      @row-dblclick="onDblClick"
+      @selection-change="onSelectionChange"
+      @page-change="onPageChange"
+    >
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button type="text" style="padding:0" @click="showDetail(row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </tf-table>
+    <!--  详情 -->
+    <Detail ref="detail" @update="updateTable" width="800px" :title="title"></Detail>
+    <!-- 删除项目 -->
+    <tf-dialog title="提示" :visible.sync="deleteDialogVisible" :footer='false'>
+      <div style="margin-bottom: 30px;">确认删除选中的{{ multipleSelection.length }}条工程项目吗?</div>
+      <div style="text-align:right;">
+        <el-button size="small" @click="deleteDialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="removeDatas">确 定</el-button>
+      </div>
+    </tf-dialog>
+  </tf-page>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
-export default Vue.extend({
-  mounted () {
-    console.log('测试111')
+import { IPagination } from '@/api/common'
+import { getDefaultPagination } from '@/utils/constant'
+import { engineerCols } from '../../cols'
+import Detail from './components/detail.vue'
+import { deleteDatas } from '../api/engineer'
+
+@Component({ name: 'Engineer', components: { Detail } })
+export default class Engineer extends Vue {
+  engineerCols = engineerCols
+  loading: Boolean = false
+  pagination: IPagination = getDefaultPagination()
+
+  tableData = []
+  formData = { serchText: '' }
+
+  deleteDialogVisible = false
+
+  multipleSelection = []
+
+  title = '工程详情'
+
+  mounted() {
+    console.log(this.pagination)
+    this.updateTable()
+  }
+
+  // 确认删除
+  removeDatas() {
+    let idArr = this.multipleSelection.map((v) => v.id)
+    deleteDatas({ ids: idArr.join(',') }).then((res) => {
+      if (res.code === 1) {
+        this.$message.success('删除成功')
+        this.updateTable()
+        this.deleteDialogVisible = false
+      } else {
+        this.$message.error('删除失败')
+      }
+    })
+  }
+  // 添加数据
+  addData(row) {
+    let card: any = this.$refs['detail']
+    this.title = '添加工程'
+    card.addData(row)
+  }
+
+  // 修改数据
+  editData(row) {
+    let card: any = this.$refs['detail']
+    this.title = '修改工程'
+    card.editData(row)
   }
-})
+  // 删除数据
+  deleteData() {
+    this.deleteDialogVisible = true
+  }
+  // 双击修改
+  onDblClick(row) {
+    let card: any = this.$refs['detail']
+    this.title = '修改工程'
+    card.editData(row)
+  }
+  onClick (row) {
+    let dom : any = this.$refs.multipleTable
+    dom && dom.$refs.table.toggleRowSelection(row)
+  }
+  // 详情
+  showDetail(row) {
+    let card: any = this.$refs['detail']
+    this.title = '工程详情'
+    card.showDetail(row)
+  }
+
+  onSelectionChange(val) {
+    this.multipleSelection = val
+  }
+
+  onPageChange(e) {
+    console.log('页面变化', e)
+  }
+  updateTable() {
+    this.pagination.total = 2
+  }
+}
 </script>
 
 
 <style>
-
 </style>