Skip to content

C
confucius
Commit 5c524d73 authored by 罗超's avatar 罗超
Browse files
Options

新增文件

parent 503c4005
Hide whitespace changes
Inline Side-by-side
Showing with 612 additions and 0 deletions
src/components/work/dasbord.vue 0 → 100644
View file @ 5c524d73
<template>
<div>
<div class="q-my-md text-dark" style="font-size:20px">
客户关系
</div>
<div class="row q-gutter-md">
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
新增学员
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="add" size="14"></q-icon>
</div>
<div>添加名单</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div class="text-dark din text-weight-bold" style="font-size:36px">
<span>36</span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
<span class="q-mr-xs">较30日均值</span>
<span class="text-weight-bold text-negative">+36%</span>
</span>
</div>
</div>
<VueApexCharts
width="100%"
height="20"
:options="chartOptions"
:series="series"
></VueApexCharts>
</q-card>
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
待跟进
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="arrow-up" size="14"></q-icon>
</div>
<div>立即跟进</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div class="row items-center">
<div class="text-dark col din text-weight-bold" style="font-size:36px">
<span>36</span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
</span>
</div>
<div class="q-pr-md">
<VueApexCharts
width="40"
height="40"
:options="chartOptions4"
:series="series4"
></VueApexCharts>
</div>
</div>
</div>
</q-card>
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
今日预约到访
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="add" size="14"></q-icon>
</div>
<div>添加到访</div>
</div>
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="add" size="14"></q-icon>
</div>
<div>添加预约</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div class="row">
<div class="text-dark din text-weight-bold" style="font-size:36px">
<span>2 </span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
</span>
</div>
<div class="q-mx-xs q-mt-xs col bg-grey-2 border-radius" style="height:64px;">
</div>
</div>
</div>
</q-card>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
components: { VueApexCharts },
data() {
return {
series: [
{
name: "新加名单",
data: [
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
}
]
}
],
chartOptions6: {
chart: {
type: "bar",
width: 100,
height: 35,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: "80%"
}
},
labels: [],
xaxis: {
crosshairs: {
width: 1
}
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function(seriesName) {
return "";
}
}
},
marker: {
show: false
}
}
},
chartOptions: {
chart: {
type: "line",
sparkline: {
enabled: true
}
},
stroke: {
width: 2,
curve: "smooth" //straight,smooth
},
fill: {
type: "solid",
opacity: [1, 1]
},
yaxis: {
min: 0
},
colors: ["#ffb743"],
title: {
text: " ",
offsetX: 0,
style: {
fontSize: "36px",
color: "#000"
}
}
},
series4: [4,3,2,20,7],
chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
chart: {
type: "donut",
width: 40,
height: 40,
sparkline: {
enabled: true
}
},
stroke: {
width: 1
},
tooltip: {
fixed: {
enabled: false
}
}
}
};
}
};
</script>
<style></style>
src/components/work/index.vue 0 → 100644
View file @ 5c524d73
<template>
<div class="work-box row">
<div class="lft-box">
<div class="relative-position">
<q-input
standout
bottom-slots
filled
@input="querySearchResult"
v-model="searchText"
label="员工"
dense
>
<template v-slot:append>
<inline-svg
class="svg-icon svg-icon-primary"
src="icons/svg/General/Search.svg"
></inline-svg>
</template>
</q-input>
<div
class="absolute bg-white rounded-borders shadow-6"
v-if="showResult"
style="top:45px;left:0px;right:0px;z-index:2"
>
<q-list>
<q-item clickable v-ripple v-for="(x, i) in usersList" :key="i">
<q-item-section avatar>
<q-avatar
rounded
size="40px"
class="bg-grey-4"
text-color="white"
>
<img :src="x.UserIcon" v-if="x.UserIcon" />
<span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="text-subtitle2">
<span>{{ x.EmployeeName }}</span>
</q-item-label>
<q-item-label class="remark-font">
<span>{{ x.DeptName }}·{{ x.PostName }}</span>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
<q-list>
<q-expansion-item dense label="我的工作" v-if="userInfo" default-opened>
<q-item
class="rounded-borders"
@click="changeMenu('myokr', 1, null)"
clickable
v-ripple
active-class="work-menu-active"
:active="activeMenu == 'myokr'"
>
<q-item-section avatar>
<q-avatar
class="bg-grey-4"
rounded
size="20px"
text-color="white"
>
<img :src="userInfo.UserIcon" v-if="userInfo.UserIcon" />
<span v-else>{{ userInfo.AccountName.substring(0, 1) }}</span>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="font-pfb">{{
userInfo.AccountName
}}</q-item-label>
</q-item-section>
</q-item>
</q-expansion-item>
<q-expansion-item
dense
label="我的直属下级"
default-opened
v-if="menuList.ChildList && menuList.ChildList.length > 0"
>
<q-item
class="rounded-borders"
@click="changeMenu(`child_${x.Id}`, 2, x)"
clickable
v-ripple
active-class="work-menu-active"
:active="activeMenu == `child_${x.Id}`"
v-for="(x, i) in menuList.ChildList"
:key="`child_${x.Id}`"
>
<q-item-section avatar>
<q-avatar
class="bg-grey-4"
rounded
size="20px"
text-color="white"
>
<img :src="x.UserIcon" v-if="x.UserIcon" />
<span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="font-pfb">{{ x.EmployeeName }}</q-item-label>
</q-item-section>
<q-item-section side>
<inline-svg
class="svg-icon svg-icon-negative"
src="icons/svg/Design/Circle.svg"
width="10"
height="10"
v-show="x.IsHaveUpdate > 0"
></inline-svg>
</q-item-section>
</q-item>
</q-expansion-item>
</q-list>
</div>
<div class="col q-pt-md q-pr-md">
<div class="row">
<div class="text-h6 col">工作台</div>
<q-btn-group outline>
<q-btn
dense
:outline="viewMode != 1"
@click="changeViewModel(1)"
class="q-px-md"
color="primary"
size="12px"
label="今日工作"
/>
<q-btn
dense
:outline="viewMode != 2"
@click="changeViewModel(2)"
class="q-px-md"
color="primary"
size="12px"
label="数据统计"
/>
</q-btn-group>
</div>
<dasbord></dasbord>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { queryOKRMyEmployeeList } from "../../api/okr/work";
import { queryEmployee } from "../../api/users/user";
import dasbord from "./dasbord.vue";
export default {
components: { dasbord },
data() {
return {
usersList: [],
showResult: false,
searchText: "",
menuList: [],
activeMenu: "myokr",
viewMode: 1
};
},
created() {
this.getUserList();
},
computed: {
...mapGetters(["userInfo"])
},
methods: {
getUserList() {
queryOKRMyEmployeeList().then(res => {
this.menuList = res.Data;
});
},
changeViewModel(val) {
this.viewMode = val;
},
querySearchResult() {
this.usersList = [];
this.showResult = false;
this.searchText = this.searchText.trim();
if (this.searchText != "") {
queryEmployee({
EmployeeName: this.searchText,
IsLeave: 1
}).then(r => {
this.usersList = r.Data;
if (this.usersList.length > 0) {
this.showResult = true;
}
});
}
},
changeMenu(vm, t, obj) {}
}
};
</script>
<style>
.work-box {
height: 100%;
width: 100%;
}
.work-box .lft-box {
padding-left: 24px;
width: 248px;
flex: 0 0 auto;
position: relative;
padding-right: 16px;
padding-top: 16px;
}
.work-box .work-menu-active {
color: var(--q-color-primary);
font-weight: bold;
background: #ecf1ff;
}
.work-box .item-shadow {
box-shadow: 0 0 40px rgb(0 0 0 / 9%) !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment