codeMan 2 vuotta sitten
vanhempi
commit
afa5dfef71

+ 506 - 0
src/SManagement/project_target/components/table.vue

@@ -0,0 +1,506 @@
+<template>
+  <div style="margin-top:16px">
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      height="calc(100vh - 182px)"
+      size="small">
+      <el-table-column
+        prop="depfullname"
+        label="部门"
+        width="120"
+        fixed>
+        <template slot-scope="scope">
+          <p :style="{textIndent:scope.row.level === 0?'10px':''}">{{scope.row.level === 0?'--':scope.row.depfullname}}</p>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="人员"
+        width="80"
+        fixed>
+        <template slot-scope="scope">
+          <p>{{scope.row.name?scope.row.name:'--'}}</p>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="position"
+        label="职位"
+        width="100"
+        fixed>
+        <template slot-scope="scope">
+          <p>{{scope.row.position?scope.row.position:'--'}}</p>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="目标/实际"
+        width="100">
+        <template>
+          <p class="center d-text">目标</p>
+          <p class="border"></p>
+          <p class="center d-text">实际</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="年度(万元)">
+        <el-table-column
+          prop="y1l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.y1l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.y1a}}</p>
+            <p class="center" :class="scope.row.y1pl < 0?'green':'red'">({{scope.row.y1pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="y1h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.y1h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.y1a}}</p>
+            <p class="center" :class="scope.row.y1ph < 0?'green':'red'">({{scope.row.y1ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="第一季度(万元)">
+        <el-table-column
+          prop="s1l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s1l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s1a}}</p>
+            <p class="center" :class="scope.row.s1pl < 0?'green':'red'">({{scope.row.s1pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="s1h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s1h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s1a}}</p>
+            <p class="center" :class="scope.row.s1ph < 0?'green':'red'">({{scope.row.s1ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="一月(万元)">
+        <el-table-column
+          prop="m1l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m1l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m1a}}</p>
+            <p class="center" :class="scope.row.m1pl < 0?'green':'red'">({{scope.row.m1pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m1h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m1h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m1a}}</p>
+            <p class="center" :class="scope.row.m1ph < 0?'green':'red'">({{scope.row.m1ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="二月(万元)">
+        <el-table-column
+          prop="m2l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m2l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m2a}}</p>
+            <p class="center" :class="scope.row.m2pl < 0?'green':'red'">({{scope.row.m2pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m2h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m2h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m2a}}</p>
+            <p class="center" :class="scope.row.m2ph < 0?'green':'red'">({{scope.row.m2ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="三月(万元)">
+        <el-table-column
+          prop="m3l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m3l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m3a}}</p>
+            <p class="center" :class="scope.row.m3pl < 0?'green':'red'">({{scope.row.m3pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m3h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m3h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m3a}}</p>
+            <p class="center" :class="scope.row.m3ph < 0?'green':'red'">({{scope.row.m3ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="第二季度(万元)">
+        <el-table-column
+          prop="s2l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s2l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s2a}}</p>
+            <p class="center" :class="scope.row.s2pl < 0?'green':'red'">({{scope.row.s2pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="s2h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s2h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s2a}}</p>
+            <p class="center" :class="scope.row.s2ph < 0?'green':'red'">({{scope.row.s2ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="四月(万元)">
+        <el-table-column
+          prop="m4l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m4l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m4a}}</p>
+            <p class="center" :class="scope.row.m4pl < 0?'green':'red'">({{scope.row.m4pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m4h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m4h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m4a}}</p>
+            <p class="center" :class="scope.row.m4ph < 0?'green':'red'">({{scope.row.m4ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="五月(万元)">
+        <el-table-column
+          prop="m5l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m5l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m5a}}</p>
+            <p class="center" :class="scope.row.m5pl < 0?'green':'red'">({{scope.row.m5pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m5h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m5h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m5a}}</p>
+            <p class="center" :class="scope.row.m5ph < 0?'green':'red'">({{scope.row.m5ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="六月(万元)">
+        <el-table-column
+          prop="m6l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m6l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m6a}}</p>
+            <p class="center" :class="scope.row.m6pl < 0?'green':'red'">({{scope.row.m6pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m6h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m6h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m6a}}</p>
+            <p class="center" :class="scope.row.m6ph < 0?'green':'red'">({{scope.row.m6ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="第三季度(万元)">
+        <el-table-column
+          prop="s3l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s3l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s3a}}</p>
+            <p class="center" :class="scope.row.s3pl < 0?'green':'red'">({{scope.row.s3pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="s3h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s3h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s3a}}</p>
+            <p class="center" :class="scope.row.s3ph < 0?'green':'red'">({{scope.row.s3ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="七月(万元)">
+        <el-table-column
+          prop="m7l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m7l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m7a}}</p>
+            <p class="center" :class="scope.row.m7pl < 0?'green':'red'">({{scope.row.m7pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m7h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m7h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m7a}}</p>
+            <p class="center" :class="scope.row.m7ph < 0?'green':'red'">({{scope.row.m7ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="八月(万元)">
+        <el-table-column
+          prop="m8l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m8l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m8a}}</p>
+            <p class="center" :class="scope.row.m8pl < 0?'green':'red'">({{scope.row.m8pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m8h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m8h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m8a}}</p>
+            <p class="center" :class="scope.row.m8ph < 0?'green':'red'">({{scope.row.m8ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="九月(万元)">
+        <el-table-column
+          prop="m9l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m9l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m9a}}</p>
+            <p class="center" :class="scope.row.m9pl < 0?'green':'red'">({{scope.row.m9pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m9h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m9h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m9a}}</p>
+            <p class="center" :class="scope.row.m9ph < 0?'green':'red'">({{scope.row.m9ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="第四季度(万元)">
+        <el-table-column
+          prop="s4l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s4l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s4a}}</p>
+            <p class="center" :class="scope.row.s4pl < 0?'green':'red'">({{scope.row.s4pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="s4h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.s4h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.s4a}}</p>
+            <p class="center" :class="scope.row.s4ph < 0?'green':'red'">({{scope.row.s4ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="十月(万元)">
+        <el-table-column
+          prop="m10l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m10l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m10a}}</p>
+            <p class="center" :class="scope.row.m10pl < 0?'green':'red'">({{scope.row.m10pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m10h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m10h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m10a}}</p>
+            <p class="center" :class="scope.row.m10ph < 0?'green':'red'">({{scope.row.m10ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="十一月(万元)">
+        <el-table-column
+          prop="m11l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m11l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m11a}}</p>
+            <p class="center" :class="scope.row.m11pl < 0?'green':'red'">({{scope.row.m11pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m11h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m11h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m11a}}</p>
+            <p class="center" :class="scope.row.m11ph < 0?'green':'red'">({{scope.row.m11ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="十二月(万元)">
+        <el-table-column
+          prop="m12l"
+          label="基本"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m12l}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m12a}}</p>
+            <p class="center" :class="scope.row.m12pl < 0?'green':'red'">({{scope.row.m12pl}}%)</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="m12h"
+          label="挑战"
+          width="120">
+          <template slot-scope="scope">
+            <p class="center d-text">{{scope.row.m12h}}</p>
+            <p class="border"></p>
+            <p class="center">{{scope.row.m12a}}</p>
+            <p class="center" :class="scope.row.m12ph < 0?'green':'red'">({{scope.row.m12ph}}%)</p>
+          </template>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tableData:[],
+      year:String((new Date()).getFullYear()),
+      condition:''
+    }
+  },
+  methods:{
+    async queryData () {
+      const res = await this.$api.requested({
+        "id": 20220904134102,
+        "content": {
+          "year": this.year,
+          "type":1,
+          "where":{
+            "condition":this.condition
+          }
+        }
+      })
+      this.tableData = res.data
+    }
+  },
+  mounted () {
+    this.queryData()
+  }
+}
+
+</script>
+<style>
+</style>
+<style scoped>
+.d-text{
+  height: 46px;
+  line-height: 46px;
+}
+.border{
+  border:1px solid #c1bfbf;
+  transform: scale(1,.2);
+}
+.center{
+  text-align: center;
+}
+.red{
+  color:red
+}
+.green{
+  color:green
+}
+</style>

+ 53 - 0
src/SManagement/project_target/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="personal-target">
+    <Header>
+      <el-button size="small">导出</el-button>
+    </Header>
+    <div class="container normal-panel">
+      <select-panel />
+      <table1 />
+    </div>
+  </div>
+</template> 
+
+<script>
+import Header from '@/SManagement/archives_upload/components/Header';
+import selectPanel from './components/selectPanel'
+import table1 from './components/table'
+export default {
+  name: '',
+  data() {
+    return {
+    };
+  },
+  components: { Header, selectPanel , table1},
+  computed:{
+  },
+  watch:{
+  },
+  created() {
+    this.getYearTarget()
+  },
+  methods: {
+    async getYearTarget() {
+      let res = await this.$api.requested({
+        "id": 20220903170002,
+        "content": {
+            "where": {
+                "condition": "",
+                "status": ""
+            },
+            "pageNumber": 1,
+            "pageSize": 20
+        },
+      })
+      console.log(res);
+      
+    }
+  },
+};
+</script>
+
+<style scoped>
+
+</style>