From b7d719a674ec0e7813d08407952151e35dea9f65 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 5 Nov 2021 17:46:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E7=B1=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectClassifyStatic/classifyList.vue    | 433 ++++++++++++++++
 .../projectClassifyStatic/projectDetail.vue   | 373 ++++++++++++++
 .../projectClassifyStatic/projectList.vue     | 461 ++++++++++++++++++
 3 files changed, 1267 insertions(+)
 create mode 100644 epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/classifyList.vue
 create mode 100644 epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectDetail.vue
 create mode 100644 epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectList.vue

diff --git a/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/classifyList.vue b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/classifyList.vue
new file mode 100644
index 0000000..21f3aa3
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/classifyList.vue
@@ -0,0 +1,433 @@
+<template>
+  <div>
+    <div v-if="flag==='classify'">
+      <el-card shadow="never"
+               class="aui-card--fill">
+        <div class="mod-demo__demo}">
+          <el-form :inline="true"
+                   :model="tableParams"
+                   @keyup.enter.native="loadTable()">
+
+            <div>
+
+              <el-form-item label="所属组织"
+                            :label-width="labelWidth">
+                <el-cascader ref="myCascader"
+                             v-model="agencyIdArray"
+                             style="width:480px"
+                             :key="iscascaderShow"
+                             :options="casOptions"
+                             :props="optionProps"
+                             @change="handleChange"
+                             clearable></el-cascader>
+              </el-form-item>
+
+              <div>
+                <el-form-item label="统计类型"
+                              :label-width="labelWidth">
+                  <el-radio v-model="staticType"
+                            label="end">截止累计值</el-radio>
+                  <el-radio v-model="staticType"
+                            label="Interval">区间新增值</el-radio>
+
+                  <el-date-picker style="margin-left:30px"
+                                  v-if="staticType==='Interval'"
+                                  v-model="timeArray"
+                                  type="daterange"
+                                  range-separator="至"
+                                  @change="handleTimeChange"
+                                  format="yyyy-MM-dd"
+                                  :picker-options="pickerOptions"
+                                  start-placeholder="开始日期"
+                                  end-placeholder="结束日期">
+                  </el-date-picker>
+
+                  <el-date-picker style="margin-left:30px"
+                                  v-if="staticType==='end'"
+                                  v-model="endTimeModel"
+                                  @change="handleEndTimeChange"
+                                  :picker-options="pickerOptions"
+                                  type="date"
+                                  placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item style="margin-left:10px">
+                  <el-button @click="loadTable()"
+                             type="primary">查询</el-button>
+                </el-form-item>
+                <el-form-item style="margin-left:10px">
+                  <el-button @click="loadOutTableData()"
+                             type="primary">导出</el-button>
+                </el-form-item>
+              </div>
+
+            </div>
+          </el-form>
+
+          <el-table :data="tableData"
+                    ref="ref_table"
+                    style="width: 100%;margin-bottom: 20px;"
+                    row-key="categoryCode"
+                    border
+                    default-expand-all
+                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+            <el-table-column prop="categoryName"
+                             label="所属类别"
+                             min-width="280px"
+                             header-align="center">
+            </el-table-column>
+            <el-table-column prop="projectTotal"
+                             label="项目总数"
+                             header-align="center"
+                             align="center"
+                             min-width="180px">
+              <template slot-scope="scope">
+                <el-button type="text"
+                           style="color:#1C6AFD;"
+                           size="small"
+                           @click="handleToProjectList(scope.row,'all')">{{scope.row.projectTotal}}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="totalRatio"
+                             header-align="center"
+                             align="center"
+                             min-width="180px"
+                             label="项目总数占比">
+            </el-table-column>
+            <el-table-column prop="closedProjectTotal"
+                             header-align="center"
+                             align="center"
+                             min-width="180px"
+                             label="结案项目数">
+              <template slot-scope="scope">
+                <el-button type="text"
+                           style="color:#1C6AFD;"
+                           size="small"
+                           @click="handleToProjectList(scope.row,'closed')">{{scope.row.projectTotal}}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="closedRatio"
+                             header-align="center"
+                             align="center"
+                             min-width="180px"
+                             label="项目结案率">
+            </el-table-column>
+          </el-table>
+        </div>
+
+      </el-card>
+    </div>
+    <project-list ref="ref_projectList"
+                  v-if="flag==='project'"
+                  @back="backToClassify"></project-list>
+  </div>
+</template>
+
+<script>
+import util from '@js/util.js';
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+import ProjectList from "./projectList"
+
+let loading // 加载动画
+
+export default {
+  data () {
+    return {
+      flag: "classify",//页面标识
+      tableData: [],
+
+      downloadLoading: false,
+
+      //查询条件标题宽度
+      labelWidth: '70px',
+
+      casOptions: [],
+      agencyIdArray: [],
+      selAgencyObj: {},
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
+      pickerOptions: { //控制时间范围
+        disabledDate (time) {
+          return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
+        }
+      },
+
+      staticType: 'end',
+      tableParams: {
+        orgId: '', //组织ID	
+        orgType: '', //组织类型 组织：agency，网格：grid
+        startTime: '', //开始时间【yyyymmdd】	,截止累计值
+        endTime: '', //结束时间【yyyymmdd】,
+      },
+      timeArray: ['', ''],
+
+      //导出表格部分
+      agencyName: '',
+      startTimeShow: '',//导出表格标题处显示的内容 	
+      endTimeShow: '', //导出表格标题处显示的内容 	
+      endTimeModel: new Date() - 60 * 60 * 24 * 2,
+
+    }
+  },
+
+  mounted () {
+    this.customerId = localStorage.getItem('customerId')
+    this.initData()
+  },
+
+  methods: {
+    async initData () {
+      this.startLoading()
+      this.initDate()
+      await this.getAgencylist()//获取组织级联列表
+      await this.loadTable()//获取组织级联列表
+      this.endLoading()
+    },
+
+    async getAgencylist () {
+      const url = '/gov/org/customeragency/orgtree'
+      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
+
+      const params = {
+        customerId: this.customerId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        ++this.iscascaderShow
+        this.casOptions = []
+        this.agencyIdArray.length = []
+        this.tableParams.orgId = ''
+        if (data) {
+          this.casOptions.push(data)
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async loadTable () {
+      if (this.validate()) {
+        // const url = '/data/report/screenproject/selectprojectcategory'
+        const url = 'http://yapi.elinkservice.cn/mock/102/data/report/screenproject/selectprojectcategory'
+
+        if (this.staticType === 'end') {
+          this.tableParams.startTime = ''
+        }
+        const { data, code, msg } = await requestPost(url, this.tableParams)
+        if (code === 0) {
+          this.tableData = data
+
+        } else {
+          this.$message.error(msg)
+        }
+      }
+    },
+
+    //跳转到项目列表页面
+    handleToProjectList (row, type) {
+      this.flag = "project"
+      this.$nextTick(() => {
+        this.$refs.ref_projectList.initData(this.agencyIdArray, row, type, this.casOptions, this.selAgencyObj)
+      })
+    },
+
+    //返回
+    backToClassify () {
+      this.flag = "classify"
+    },
+
+    handleChange (value) {
+      if (value && value.length > 0) {
+        this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data
+        this.tableParams.orgId = this.selAgencyObj.agencyId
+        this.tableParams.orgType = this.selAgencyObj.level
+        this.agencyName = this.selAgencyObj.agencyName
+      } else {
+        this.selAgencyObj = {}
+        this.tableParams.orgId = ''
+        this.tableParams.orgType = ''
+        this.agencyName = ''
+      }
+    },
+
+    initDate () {
+      //设置默认结束日期为前一天
+      const date = new Date()
+      const month = date.getMonth() + 1 > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
+      const day = date.getDate() - 1 > 9 ? (date.getDate() - 1) : '0' + (date.getDate() - 1)
+      const yesterday = date.getFullYear() + '-' + month + '-' + day
+      this.timeArray = ['', yesterday]
+      this.endTimeModel = yesterday
+
+      let yesterdayArray = yesterday.split('-')
+
+      this.tableParams.endTime = yesterdayArray[0] + yesterdayArray[1] + yesterdayArray[2]
+
+      this.endTimeShow = yesterdayArray[0] + '年' + yesterdayArray[1] + '月' + yesterdayArray[2] + '日'
+    },
+
+
+    handleEndTimeChange (item) {
+      if (item) {
+        const endTimeArray = util.dateFormatter(item, 'date').split('-')
+        this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2]
+        this.endTime = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
+      } else {
+        this.tableParams.endTime = ''
+        this.endTimeShow = ''
+      }
+    },
+
+    handleTimeChange (time) {
+      if (time) {
+        const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
+        const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
+
+        this.tableParams.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2]
+        this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2]
+
+        this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
+        this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
+      } else {
+        this.tableParams.startTime = ''
+        this.tableParams.endTime = ''
+        this.startTimeShow = ''
+        this.endTimeShow = ''
+      }
+
+    },
+
+
+    validate () {
+
+      if (this.staticType === 'end' && !this.tableParams.endTime) {
+        this.$message.info("请选择结束日期")
+        return false
+      }
+
+      return true
+    },
+
+    //导出表格
+    async loadOutTableData () {
+      if (!this.validate()) {
+        return false
+      }
+      let title = this.agencyName
+
+      if (this.staticType === 'Interval') {
+        title = title + ' ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值'
+      } else {
+        title = title + ' 截止至' + this.endTimeShow + '累计值'
+      }
+      console.log(title)
+
+
+      const url = "/data/report/screenproject/selectprojectcategory/export"
+
+
+      console.log(this.tableParams)
+      app.ajax.exportFilePost(
+        url,
+        this.tableParams,
+        (data, rspMsg) => {
+
+          this.download(data, title + '.xls')
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg);
+        }
+      );
+
+    },
+
+    // 下载文件
+    download (data, fileName) {
+      if (!data) {
+        return
+      }
+
+      var csvData = new Blob([data])
+
+      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(csvData, fileName);
+      }
+      // for Non-IE (chrome, firefox etc.)
+      else {
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style = 'display: none';
+        var url = window.URL.createObjectURL(csvData);
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+      }
+
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    tableHeight () {
+      return this.clientHeight - 60 - 80 - 80 - 100
+    },
+
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  components: {
+    ProjectList
+  },
+  activated () {
+    this.$nextTick(() => {
+      this.$refs.ref_table.doLayout() // 解决表格错位
+    })
+  },
+}
+</script>
+<style lang="css" scoped>
+.myNote {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+/* .register .el-table .el-table__header-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}*/
+/*
+.register .el-table .el-table__fixed-body-wrapper {
+  height: calc(100% - 44px);
+  margin-top: 44px;
+  overflow-y: auto !important;
+} */
+</style>
+
diff --git a/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectDetail.vue b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectDetail.vue
new file mode 100644
index 0000000..c343859
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectDetail.vue
@@ -0,0 +1,373 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <div class="mod-demo__demo}">
+
+        <div class="div_info_item">
+          <span class="span_item_title">项目标题：</span>
+          <span>{{info.projectTitle}}</span>
+        </div>
+
+        <div class="div_info_item">
+          <span class="span_item_title">项目内容：</span>
+          <span v-if="info.projectContent">{{info.projectContent}}</span>
+          <span v-else>无</span>
+        </div>
+
+        <div class="div_info_item">
+          <span class="span_item_title">上报时间：</span>
+
+          <span v-if="info.reportTime">{{info.reportTime}}</span>
+          <span v-else>无</span>
+        </div>
+        <div class="div_info_item">
+          <span class="span_item_title">上报人：</span>
+          <span v-if="info.reportUserName">{{info.reportUserName}}</span>
+          <span v-else>无</span>
+        </div>
+        <div class="div_info_item">
+          <span class="span_item_title">电话：</span>
+          <span v-if="info.mobile">{{info.mobile}}</span>
+          <span v-else>无</span>
+        </div>
+        <div class="div_info_item">
+          <span class="span_item_title">地点：</span>
+          <span v-if="info.reportAddress">{{info.reportAddress}}</span>
+          <span v-else>无</span>
+        </div>
+        <div class="div_info_item">
+          <span class="span_item_title">所属分类：</span>
+          <span v-if="info.categoryName">{{info.categoryName}}</span>
+          <span v-else>无</span>
+        </div>
+
+      </div>
+
+      <div class="div_process">
+        <div class="m-list"
+             v-show="info.processList.length>0">
+          <div class="title">处理进展</div>
+          <div class="list">
+            <div :class="['item',{'z-on': index===0}]"
+                 v-for="(item,index) in info.processList"
+                 :key="index">
+
+              <div class="name">【{{ item.operationShow}}】</div>
+              <div class="date">
+                <span>{{ item.reponseTime }}</span>
+
+              </div>
+              <div class="detail">
+                <span class="detail-field">处理部门：</span>
+                <span class="detail-value">{{ item. handleDeptName }}</span>
+              </div>
+
+              <div class="detail">
+                <span class="detail-field">处理意见：</span>
+                <span class="detail-value">
+                  <span>{{ item.suggestion}}</span>
+                </span>
+              </div>
+              <div class="detail">
+                <el-upload class="upload-demo"
+                           action=""
+                           :on-preview="handleFileDownload"
+                           :limit="50"
+                           :file-list="fileList">
+
+                </el-upload>
+                <!-- <attachment-list list="{{item.attachments}}" /> -->
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+
+let loading // 加载动画
+
+export default {
+  data () {
+    return {
+      projectId: "",//项目id
+      formData: {},
+
+      //查询条件标题宽度
+      labelWidth: '100px',
+
+      info: {
+        projectTitle: "",//标题
+        projectId: "",//项目id
+        projectContent: "",//议题内容，其实就是项目内容
+        imgList: "",//图片列表
+        reportTime: "",//上报时间，对应的是立项时间;格式：yyyy-MM-dd HH:mm
+        categoryName: "",//所属类别名称
+        reportUserId: "",//上报人Id
+        reportUserRoleSet: "",//上报人角色列表，grid_member:网格员；
+        reportUserName: "",//上报人名称；山东路-尹女士
+        mobile: "",//上报人电话
+        reportAddress: "",//上报位置
+        processList: [],//
+      },
+      fileList: [
+        // {
+        //   name: 'food.jpeg',
+        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        // }, {
+        //   name: 'food2.jpeg',
+        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        // }
+      ],
+    }
+  },
+
+  mounted () {
+
+  },
+
+  methods: {
+    async initData (projectId) {
+      this.startLoading()
+      this.projectId = projectId
+      await this.loadDetail()//获取项目详情
+      this.endLoading()
+    },
+
+    async loadDetail () {
+
+      const url = '/data/report/screen/project/projectdetailv2'
+
+      // const params = {
+      //   projectId: this.projectId
+      // }
+      const params = {
+        projectId: "440dfb6f22d9860fb1c2d1fc044a901f"
+      }
+      const { data, code, msg } = await requestPost(url, params)
+
+
+      if (msg === "success" && code === 0 && data.length > 0) {
+        this.info = data[0]
+        // info = copyKeyHave(info, data[0]);
+
+        this.info.processList.forEach(element => {
+          //关闭：close; 回应 response，结案closed_case，退回return，部门流转transfer，创建项目created
+          if (element.operation === 'close') {
+            element.operationShow = '关闭'
+          } else if (element.operation === 'response') {
+            element.operationShow = '回应'
+          } else if (element.operation === 'closed_case') {
+            element.operationShow = '结案'
+          } else if (element.operation === 'return') {
+            element.operationShow = '退回'
+          } else if (element.operation === 'transfer') {
+            element.operationShow = '部门流转'
+          } else if (element.operation === 'created') {
+            element.operationShow = '创建项目'
+          }
+        });
+
+      }
+
+    },
+
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    tableHeight () {
+      return this.clientHeight - 60 - 80 - 80 - 100
+    },
+
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  components: {},
+  activated () {
+    this.$nextTick(() => {
+      this.$refs.ref_table.doLayout() // 解决表格错位
+    })
+  },
+}
+</script>
+<style lang="scss" scoped>
+.div_info_item {
+  line-height: 25px;
+  padding: 10px;
+  font-size: 15px;
+  display: flex;
+  .span_item_title {
+    flex: 0 0 100px;
+
+    text-align: right;
+    display: inline-block;
+  }
+}
+.div_process {
+  padding: 0 10px 10px 10px;
+}
+.m-list {
+  position: relative;
+  margin-top: 10px;
+  padding-bottom: 15px;
+  background-color: #ffffff;
+
+  .title {
+    line-height: 40px;
+    border-bottom: 1px solid #e7eeee;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  .more-btn {
+    position: absolute;
+    z-index: 1;
+    top: 10px;
+    right: 10px;
+    line-height: 25px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: rgba(12, 74, 157, 1);
+  }
+
+  .list {
+    position: relative;
+    box-sizing: border-box;
+    margin-top: 15px;
+    margin-left: 25px;
+    padding: 0 0 0 15px;
+    border-left: 1px solid #e7eeee;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      display: block;
+      top: -1px;
+      left: -1px;
+      width: 2px;
+      height: 10px;
+      background-color: #ffffff;
+    }
+
+    .item {
+      position: relative;
+      z-index: 2;
+      margin-bottom: 5px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #e7eeee;
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 9px;
+        left: -20px;
+        width: 10px;
+        height: 10px;
+        background: #999;
+        border-radius: 100%;
+      }
+
+      &.z-on {
+        &::before {
+          background: rgba(230, 0, 0, 1);
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 47px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(153, 153, 153, 1);
+        border-radius: 10px;
+        font-size: 13px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+      }
+
+      .name {
+        position: relative;
+        margin-bottom: 5px;
+        margin-left: -7px;
+        line-height: 25px;
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: rgba(51, 51, 51, 1);
+      }
+
+      .date {
+        line-height: 20px;
+        font-size: 13px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+      }
+
+      .detail {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        line-height: 25px;
+
+        .detail-field {
+          width: 22%;
+          text-align: justify;
+          text-align-last: justify;
+          color: rgba(153, 153, 153, 1);
+        }
+        .detail-value {
+          width: 78%;
+          color: #333333;
+          .detail-link {
+            display: inline;
+            color: #0c4a9d;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
diff --git a/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectList.vue b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectList.vue
new file mode 100644
index 0000000..7276145
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/projectClassifyStatic/projectList.vue
@@ -0,0 +1,461 @@
+<template>
+  <div>
+    <el-card shadow="never"
+             class="aui-card--fill">
+      <div class="mod-demo__demo}">
+        <el-form :inline="true"
+                 :model="tableParams"
+                 @keyup.enter.native="loadTable()">
+
+          <div>
+            <el-form-item style="margin-left:10px">
+              <el-button @click="handleBack()"
+                         type="primary">返回</el-button>
+            </el-form-item>
+
+            <el-form-item label="所属组织"
+                          :label-width="labelWidth">
+              <el-cascader ref="myCascader"
+                           v-model="agencyIdArray"
+                           style="width:480px"
+                           :key="iscascaderShow"
+                           :options="casOptions"
+                           :props="optionProps"
+                           @change="handleChange"
+                           clearable></el-cascader>
+            </el-form-item>
+
+            <div>
+              <el-form-item label="统计类型"
+                            :label-width="labelWidth">
+                <el-radio v-model="staticType"
+                          label="end">截止累计值</el-radio>
+                <el-radio v-model="staticType"
+                          label="Interval">区间新增值</el-radio>
+
+                <el-date-picker style="margin-left:30px"
+                                v-if="staticType==='Interval'"
+                                v-model="timeArray"
+                                type="daterange"
+                                range-separator="至"
+                                @change="handleTimeChange"
+                                format="yyyy-MM-dd"
+                                :picker-options="pickerOptions"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期">
+                </el-date-picker>
+
+                <el-date-picker style="margin-left:30px"
+                                v-if="staticType==='end'"
+                                v-model="endTimeModel"
+                                @change="handleEndTimeChange"
+                                :picker-options="pickerOptions"
+                                type="date"
+                                placeholder="选择日期">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item style="margin-left:10px">
+                <el-button @click="loadTable()"
+                           type="primary">查询</el-button>
+              </el-form-item>
+              <el-form-item style="margin-left:10px">
+                <el-button @click="loadOutTableData()"
+                           type="primary">导出</el-button>
+              </el-form-item>
+            </div>
+
+          </div>
+        </el-form>
+
+        <el-table :data="tableData"
+                  border
+                  style="width: 100%">
+          <el-table-column prop="category"
+                           label="类别"
+                           min-width="180">
+          </el-table-column>
+          <el-table-column prop="projectTitle"
+                           label="项目标题"
+                           min-width="260">
+          </el-table-column>
+          <el-table-column prop="gridName"
+                           label="所属网格"
+                           min-width="240">
+          </el-table-column>
+          <el-table-column prop="projectStatus"
+                           label="状态">
+            <template slot-scope="scope">
+              <span v-if="scope.row.projectStatus==='pending'"
+                    style="color:#feb349;"
+                    size="small">处理中</span>
+              <span v-if="scope.row.projectStatus==='closed'"
+                    style="color:#00A7A9;"
+                    size="small">已结案</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime"
+                           label="创建时间"
+                           min-width="140">
+          </el-table-column>
+          <el-table-column label="操作"
+                           fixed="right"
+                           width="140"
+                           header-align="center"
+                           align="center"
+                           class="operate">
+            <template slot-scope="scope">
+
+              <el-button type="text"
+                         style="color:#D51010;"
+                         size="small"
+                         @click="handleDetail(scope.row)">查看详情</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-pagination @size-change="handleSizeChange"
+                         @current-change="handleCurrentChange"
+                         :current-page.sync="tableParams.pageNo"
+                         :page-sizes="[20, 30, 50]"
+                         :page-size="tableParams.pageSize"
+                         layout="sizes, prev, pager, next"
+                         :total="total">
+          </el-pagination>
+        </div>
+      </div>
+
+    </el-card>
+
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="diaShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="'项目详情'"
+               top="5vh"
+               width="50%"
+               @closed="diaClose">
+      <project-Detail ref="ref_projectDetail">
+
+      </project-Detail>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import util from '@js/util.js';
+import ProjectDetail from "./projectDetail"
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+
+let loading // 加载动画
+
+export default {
+  data () {
+    return {
+      tableData: [],
+
+      downloadLoading: false,
+
+      //查询条件标题宽度
+      labelWidth: '70px',
+      casOptions: [],
+      agencyIdArray: [],
+      selAgencyObj: {},
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
+      pickerOptions: { //控制时间范围
+        disabledDate (time) {
+          return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
+        }
+      },
+      staticType: 'end',
+      tableParams: {
+        status: '', //项目状态：closed：已结案，all：全部	
+        categoryCode: '', //分类code	
+        orgId: '', //组织ID	
+        pageSize: 20,
+        pageNo: 1,
+        startTime: '', //开始时间【yyyymmdd】	,截止累计值
+        endTime: '', //结束时间【yyyymmdd】,
+      },
+      total: 0,
+      timeArray: ['', ''],
+
+      agencyName: '',
+      startTimeShow: '',//导出表格标题处显示的内容 	
+      endTimeShow: '', //导出表格标题处显示的内容 	
+      endTimeModel: new Date() - 60 * 60 * 24 * 2,
+
+      //弹出详情相关
+      diaShow: false,
+
+    }
+  },
+
+  mounted () {
+    this.customerId = localStorage.getItem('customerId')
+  },
+
+  methods: {
+    async initData (agencyIdArray, row, type, casOptions, selAgencyObj) {
+      this.startLoading()
+      //初始化日期
+      this.initDate()
+
+      //初始化组织数据
+      this.initAgencyList(casOptions)
+
+      this.tableParams.status = type
+      this.tableParams.categoryCode = row.categoryCode
+      this.agencyIdArray = agencyIdArray
+      this.selAgencyObj = selAgencyObj
+      this.tableParams.orgId = this.selAgencyObj.agencyId
+
+      await this.loadTable()//获取组织级联列表      
+
+      this.endLoading()
+    },
+
+    initAgencyList (casOptions) {
+      ++this.iscascaderShow
+      this.casOptions = []
+      this.agencyIdArray.length = []
+      this.tableParams.orgId = ''
+      if (casOptions) {
+        this.casOptions = casOptions
+      }
+    },
+
+    async loadTable () {
+      if (this.validate()) {
+        // const url = '/data/report/screenproject/selectcategoryprojectlist'
+        const url = 'http://yapi.elinkservice.cn/mock/102/data/report/screenproject/selectcategoryprojectlist'
+
+        if (this.staticType === 'end') {
+          this.tableParams.startTime = ''
+        }
+        const { data, code, msg } = await requestPost(url, this.tableParams)
+        if (code === 0) {
+          this.total = data.total
+          this.tableData = data.list
+
+
+        } else {
+          this.$message.error(msg)
+        }
+      }
+    },
+
+    //跳转到项目列表页面
+    handleDetail (row) {
+      this.diaShow = true
+      this.$nextTick(() => {
+        this.$refs.ref_projectDetail.initData(row.projectId)
+      })
+    },
+
+    //关闭详情
+    diaClose () {
+      this.diaShow = false
+    },
+
+    handleChange (value) {
+      if (value && value.length > 0) {
+        this.selAgencyObj = this.$refs["myCascader"].getCheckedNodes()[0].data
+        this.tableParams.orgId = this.selAgencyObj.agencyId
+        this.agencyName = this.selAgencyObj.agencyName
+      } else {
+        this.selAgencyObj = {}
+        this.tableParams.orgId = ''
+        this.agencyName = ''
+      }
+    },
+
+    initDate () {
+      //设置默认结束日期为前一天
+      const date = new Date()
+      const month = date.getMonth() + 1 > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
+      const day = date.getDate() - 1 > 9 ? (date.getDate() - 1) : '0' + (date.getDate() - 1)
+      const yesterday = date.getFullYear() + '-' + month + '-' + day
+      this.timeArray = ['', yesterday]
+      this.endTimeModel = yesterday
+
+      let yesterdayArray = yesterday.split('-')
+      this.tableParams.endTime = yesterdayArray[0] + yesterdayArray[1] + yesterdayArray[2]
+      this.endTimeShow = yesterdayArray[0] + '年' + yesterdayArray[1] + '月' + yesterdayArray[2] + '日'
+    },
+
+
+    handleEndTimeChange (item) {
+      if (item) {
+        const endTimeArray = util.dateFormatter(item, 'date').split('-')
+        this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2]
+        this.endTime = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
+      } else {
+        this.tableParams.endTime = ''
+        this.endTimeShow = ''
+      }
+    },
+
+    handleTimeChange (time) {
+      if (time) {
+        const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
+        const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
+
+        this.tableParams.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2]
+        this.tableParams.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2]
+
+        this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
+        this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
+      } else {
+        this.tableParams.startTime = ''
+        this.tableParams.endTime = ''
+        this.startTimeShow = ''
+        this.endTimeShow = ''
+      }
+
+    },
+
+    handleSizeChange (val) {
+      this.tableParams.pageSize = val
+      this.tableParams.pageNo = 1
+      this.loadTable()
+    },
+    handleCurrentChange (val) {
+      this.tableParams.pageNo = val
+      this.loadTable()
+    },
+    handleBack () {
+      this.$emit('back')
+    },
+    validate () {
+
+      if (this.staticType === 'end' && !this.tableParams.endTime) {
+        this.$message.info("请选择结束日期")
+        return false
+      }
+
+      return true
+    },
+
+    //导出表格
+    async loadOutTableData () {
+      if (!this.validate()) {
+        return false
+      }
+      let title = this.agencyName
+
+      if (this.staticType === 'Interval') {
+        title = title + ' ' + this.startTimeShow + '-' + this.endTimeShow + '区间增长值'
+      } else {
+        title = title + ' 截止至' + this.endTimeShow + '累计值'
+      }
+      console.log(title)
+
+      const url = "/data/report/screenproject/selectcategoryprojectlist/export"
+
+      app.ajax.exportFilePost(
+        url,
+        this.tableParams,
+        (data, rspMsg) => {
+
+          this.download(data, title + '.xls')
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg);
+        }
+      );
+
+    },
+
+    // 下载文件
+    download (data, fileName) {
+      if (!data) {
+        return
+      }
+
+      var csvData = new Blob([data])
+
+      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(csvData, fileName);
+      }
+      // for Non-IE (chrome, firefox etc.)
+      else {
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style = 'display: none';
+        var url = window.URL.createObjectURL(csvData);
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+      }
+
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    tableHeight () {
+      return this.clientHeight - 60 - 80 - 80 - 100
+    },
+
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  components: {
+    ProjectDetail
+  },
+  activated () {
+    this.$nextTick(() => {
+      this.$refs.ref_table.doLayout() // 解决表格错位
+    })
+  },
+}
+</script>
+<style lang="css" scoped>
+.myNote {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+/* .register .el-table .el-table__header-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}*/
+/*
+.register .el-table .el-table__fixed-body-wrapper {
+  height: calc(100% - 44px);
+  margin-top: 44px;
+  overflow-y: auto !important;
+} */
+</style>
+